欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5中怎样表现视频呢 HTML5视频播放demo

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

本日,大大都视频是通过插件(好比 Flash)来表现的。然而,并非全部赏识器都拥有同样的插件。

HTML5 划定了一种通过 video 元向来包括视频的尺度要领。
在HTML5中,video元素今朝支持三种名目标视频文件,
1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
3.WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

那么在HTML5中怎样表现视频呢?例子如下:


代码如下:
<video src="demo.mp4" width="500" height="250" controls="controls">您的赏识器不支持此种视频名目。</video>

好了,此刻来表明下video元素中各属性的寄义,个中width、height就不表明白啊,首要说下controls,顾名思义,controls 就是控件们,哈哈,就是视频的播放、音量停息等控件。video元素中间插入的汉字,智慧的你必然知道的,是提醒用户赏识器不支持视频名目行使的。

必要留意的是,要确保合用于Safari 赏识器,视频文件必需是 MP4范例。而ogg名目标视频则是合用于Firefox、Opera 以及Chrome 赏识器。Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对行使 MPEG4 的 video 元素的支持。

虽然了,我们假如不确定本身的赏识器支持什么名目标视频,可以先检测一下,检测要领在另一片博文里有,感乐趣的可以去看一下。如果不想贫困,那怎么办呢?我们可以这样:


代码如下:
<video width="500" height="250" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的赏识器不支持此种视频名目。
</video>

video 元素应承多个 source 元素。source 元素可以链接差异的视频文件。赏识器将行使第一个可识此外名目,这样我们只要多筹备几个差异名目标视频就可以了。
接下来,先容几个video标签的属性,
1.autoplay :呈现该属性意味着视频在停当后将自动播放,用法:autoplay="autoplay"
2.controls :呈现该属性意味着向用户表现控件,如播放按钮等,用法:controls="controls"
3.height:配置高度
4.width:配置宽度
5.loop:自动重播,用法:loop="loop"
6.preload:视频在页面加载时举办加载并准备播放,用法:preload="auto"
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
留意:若行使了autoplay,则忽略preload
7.src:要播放视频的url 本文地址:http://itbyc.com/web/html5/13564.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1