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:

浏览器MP4WebMOgg
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>

 

四、VideoContext

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

 

 

更多:

 

 HTML 5 Audio/Video DOM buffered 属性

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

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

posted @ 2020-08-22 11:50  天马3798  阅读(296)  评论(0编辑  收藏  举报