HTML5 多媒体之<video>标签 使用

一、HTML5 多媒体之<video>标签 使用

<video> 标签定义视频，比如电影片段或其他视频流。

 <video src="../../img/video/1.mp4" controls></video>

注释：Internet Explorer 8 以及更早的版本不支持 <video> 标签。

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。新版本谷歌、火狐浏览器拒接自动播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

 

谷歌浏览器：

火狐浏览器：

Edge浏览器：

 

二、视频格式与浏览器的支持

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

• MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
• WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
• Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

视频格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

 

三、Video JS Api

 

ideo标签也提供了比较人性化的API接口方法，供写JS时直接调用，方便简单

 

 

 

API	事件说明
addTextTrack()	向音频/视频添加新的文本轨道。
play	video.play();    播放视频
pause	video.pause();  暂停播放视频
load	video.load();   将全部属性回复默认值，视频恢复重新开始状态
canPlayType	var support = videoid.canPlayType('video/mp4');   判断浏览器是否支持当前类型的视频格式 返回值： 空字符串：不支持 Maybe：可能支持 Probably：完全支持

 

    <video id="myVideo"></video>

    <script>
        var video = document.getElementById('myVideo');
        video.width = 500;
        video.height = 300;
        video.controls = true;
        video.src = '../../img/video/1.mp4';

        //触发播放
        window.onclick = function () {
            video.play();
        }
    </script>

 

　　常用事件

　　事件名称 ： 解释

　　oncanplay：当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。

　　ontimeupdate： 当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。

　　onended：当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。

 

四、VideoContext

主流不支持，等待完善......

 

 

更多：

 

 HTML 5 Audio/Video DOM buffered 属性

 HTML5 多媒体之<audio>标签 使用

新版本chrome浏览器(80版本以后)带来的跨域请求cookie丢失问题