·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]html5的video视频标签属性介绍很全面

时间:2018-11-12 11:12segmentfault.com
[html5]html5的video视频标签属性介绍很全面,要嵌到页面的视频的URL。可选;你也可以使用video块内的 元素来指定需要嵌到页面的视频

初始化 <video> 标签时主要设置的属性

  1. src:要嵌到页面的视频的URL。可选;你也可以使用video块内的 <source> 元素来指定需要嵌到页面的视频

  2. autoplay:布尔属性;指定后,视频会马上自动开始播放,不会停下来等着数据载入结束

  3. controls:加上这个属性,Gecko 会提供用户控制,允许用户控制视频的播放,包括音量,跨帧,暂停/恢复播放

  4. poster:一个海报帧的URL,用于在用户播放或者跳帧之前展示。如果属性未指定,那么在第一帧可用之前什么都不会展示;之后第一帧就像海报帧一样展示

  5. preload:该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。可能是下列值之一:

    • none:提示作者认为用户不需要查看该视频,服务器也想要最小化访问流量;换句话说就是提示浏览器该视频不需要缓存

    • metadata:提示尽管作者认为用户不需要查看该视频,不过抓取元数据(比如:长度)还是很合理的

    • auto:用户需要这个视频优先加载;换句话说就是提示:如果需要的话,可以下载整个视频,即使用户并不一定会用它

    • 空字符串:也就代指 auto 值

  6. buffered:这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象

  7. played:一个 TimeRanges 对象,指明了视频已经播放的所有范围

  8. loop:布尔属性;指定后,会在视频结尾的地方,自动返回视频开始的地方

  9. muted:布尔属性,指明了视频里的音频的默认设置。设置后,音频会初始化为静音。默认值是 false ,意味着视频播放的时候音频也会播放

  10. height:视频展示区域的高度,单位是 CSS 像素

  11. width:视频显示区域的宽度,单位是 CSS 像素

  12. crossorigin:该枚举属性指明抓取相关图片是否必须用到CORS(跨域资源共享)。 支持CORS的资源 可在 <canvas> 元素中被重用,而不会被污染。允许的值如下:

    • anonymous:跨域请求会被执行,但是不发送凭证。

    • use-credentials:跨域请求A cross-origin request会被执行,且凭证会被发送。

 相关链接:

支持html5的酷播云免费产品:http://www.cuplayer.com/cloud/
html5音频播放器下载:http://52player.cn/MusicPlayer/
html5视频播放器下载:http://52player.cn/VideoPlayer/

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器