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

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

杨雨个人博客网站

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

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

HTML5 video 视频标签行使先容

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

HTML <video> 合用于HTML 5+,用于界说在线寓目标视频流媒体。



代码如下:
<video width="320" height="240" src="http://itbyc.com/movie.ogg" controls="controls">
这里是注释笔墨,假如无法支持 HTML 5 赏识器将表现这里的笔墨。假如支持,就直接表现视频,忽略笔墨。
</video>

在HTML 4 及早年,假如您想在网页中嵌入在线寓目标视频,一样平常都必要行使Flash视频流,通过行使 <object> 和 <embed> 标签,就可以通过赏识器播放swf、flv等名目视频文件,可是条件是赏识器必需安装第三方插件:Adobe Flash Player。而当代智妙手机和iPad等一样平常都无法支持Flash,以是无法赏识网页上的视频。而 HTML 5 改变了这一究竟,Web开拓者只必要行使 <video> 标签就可以轻松加载视频文件,而不必要任何第三方插件。

属性 描写
autoplay autoplay 假如呈现该属性,则视频在停当后顿时播放。
controls controls 假如呈现该属性,则向用户表现控件,好比播放按钮。
height 像素值 配置视频播放器的高度。
loop loop 假如呈现该属性,则当前言文件完成播放后再次开始播放。
preload auto/meta/none 划定是否预加载视频,也许的值:
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
* src 视频地点 要播放的视频的 URL,提议行使绝对地点。
width 像素值 配置视频播放器的宽度。

怎样写兼容的视频标签?

因为旧的赏识器和Internet Explorer不支持<video>元素,思量到兼容性,我们必需为这些赏识器找到一个支持Flash文件的办理方案。不幸的是,和HTML 5音频一样,涉及到视频的文件名目,Firefox 和 Safari/Chrome 的支持方法并不沟通。因此,假如你想在这个时辰行使HTML 5视频,则必要建设三个视频版本。OGG,MP4,FLV/SWF



代码如下:
<video width="320" height="240" controls>
<!-- 兼容 Firefox -->
<source src="http://itbyc.com/ movie.ogg" type="video/ogg" />
<!-- 兼容 Safari/Chrome-->
<source src="http://itbyc.com/ movie.mp4" type="video/mp4" />
<!-- 假如赏识器不支持video标签,则行使flash -->
<embed src="http://itbyc.com/ movie.swf" type="application/x-shockwave-flash"
width="320" height="240" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>

本文地址:http://itbyc.com/web/html5/14874.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1