video与audio的使用
HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。
这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。
·首先带大家熟悉一下video标签的属性方法,根据属性方法做一个小demo,
HTML5
支持的视频格式:Ogg
- 带有
Theora
视频编码+Vorbis
音频编码的Ogg
文件 - 支持的浏览器:
F
、C
、O
- 带有
MEPG4
- 带有
H.264
视频编码+AAC
音频编码的MPEG4
文件 - 支持的浏览器:
S
、C
- 带有
WebM
- 带有
VP8
视频编码+Vorbis
音频编码的WebM
格式 - 支持的浏览器:
I
、F
、C
、O
- 劣势:视频少、转码器几乎没有,不好转码
- 带有
想要
video
能自动填充慢父div的大小,只要给video
标签加上style="width= 100%; height=100%; object-fit: fill"
即可- 指定一种视频格式,不能播就提示
- <video id="media" src="examp.mp4" width="500" poster="examp1.jpg" >您的浏览器不支持video</video>
<video controls = “controls”>
<source src=”1.mp4” type=”video/mp4” /> //src属性写到source标签中,要指定视频的type类型,例如MP4的即为type=“video/mp4”
<source src = “2.ogg” type=”video/ogg” /> //ogg格式
<source src=”3.webm” type=”video/webm” /> //webm格式
</video>
video与audio的使用的更多相关文章
- video 与 audio
Play方法:使用play方法来播放媒体,自动将元素的paused属性的值变为false.Pause方法:使用pause方法来暂停播放,自动将元素的paused属性的值变为true.Load方法:使用 ...
- <video>和<audio>标签,对视频和音频的支持
H5新增了<video>和<audio>标签,提供对视频和音频的支持 <audio>的属性与<video>属性相同 <video> vide ...
- HTML5 学习07——Video(视频)Audio(音频)
<video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...
- html5新媒体播放器标签video、audio 与embed、object
html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是 ...
- 范仁义html+css课程---9、video、audio、canvas和svg元素略讲
范仁义html+css课程---9.video.audio.canvas和svg元素略讲 一.总结 一句话总结: video:HTML5视频标签. audio:html5音频标签. canvas:绘制 ...
- HTML5视频Video 音频Audio
视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...
- HTML5 video 和 audio
video 用于在HTML或者XHTML文档中嵌入视频内容 使用 video 元素至少要提供两种视频格式的文件:OGG 和 MP4 OGG:采用 Theora 视频格式和 Vorbis 音频解码器 ( ...
- HTML5 Video与Audio 视频与音频
---- 视频Video对象 - 指定视频播放地址 <video width="320" height="240" controls="cont ...
- <video>和<audio>标签
一.<video>基本格式: <video width=" " heigh="" src=""> </vide ...
随机推荐
- VHDL和verilog应该先学哪个?
网上有太多的VHDL和verilog比较的文章,基本上说的都是VHDL和verilog之间可以实现同一级别的描述,包括仿真级.寄存器传输级.电路级,所以可以认为两者是等同级别的语言.很多时候会了其中一 ...
- 洛谷 P2904 [USACO08MAR]跨河River Crossing
题目 动规方程 f[i]=min(f[i],f[i−j]+sum) 我们默认为新加一头牛,自占一条船.想象一下,它不断招呼前面的牛,邀请它们坐自己这条船,当且仅当所需总时间更短时,前一头奶牛会接受邀请 ...
- JAVA的18条BASE
关于Java的基础知识,实践证明学习OO,最终领悟“父类控制流程,子类实现具体的业务逻辑”的OO思想,需要的不是智商而是基础,也就是说,基础越好越快领悟,所以请每位S1学习Java的学员请牢记以下Ja ...
- 记kkpager分页控件的使用
kkpager支持异步加载分页: 1.页面添加div标签和引用JS,默认标签为<div id="kkpager"></div> 引用JS和样式 <sc ...
- Beego 框架学习(一)
Beego官网本身已经整理的非常详细了,但是作为一个学习者,我还是决定自己好好整理一下,这样在后面使用的时候自己对每部分才能非常熟悉,及时忘记了,也可以迅速定位自己要用的知识在哪里.当然也是对官网的一 ...
- java 多线程(总结)
今天看了几篇关于java多线程问题的文章,将他们的部分内容引过来总结下,也算是对java多线程这类问题的整理. 在多线程中,必须明白两个问题,一是多线程实现,二是代码同步. 在java中要想实现多线程 ...
- 最大堆(Java数组实现)
最大堆 data[1]开始存,data[0]空着不用.也可以把data[0]当成size来用. public class MaxHeap<T extends Comparable<? su ...
- Tomcat使用基础
1.解压Tomcat压缩文件后需要在环境变量里配置 :TOMCAT_HOME:D:\apache-tomcat-8.0.35. 2.将打好的项目war包放到tomcat安装目录的webapps文件夹下 ...
- [poj3252]Round Numbers_数位dp
Round Numbers poj3252 题目大意:求一段区间内Round Numbers的个数. 注释:如果一个数的二进制表示中0的个数不少于1的个数,我们就说这个数是Round Number.给 ...
- svn 要求commit提交必须加注释(日志) hook
#vim /data/svn/mysvn/hook/pre-commit #!/bin/bashREPOS="$1"TXN="$2" #RES="OK ...