HTML5教程 5分钟了解HTML5 video-职坐标

HTML5教程 5分钟了解HTML5 video

沉沙 2018-06-20 来源：阅读 1947 评论 0

摘要：本篇HTML5教程讲解了HTML5 video的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

一、video标签的基本属性

1.autoplay=“autoplay”：规定一旦视频就绪马上开始播放

2.control=“controls”：让浏览器为视频播放器提供默认的暂停、进度条等控件。如果设置了这个就不能使用自己定义的控件。

3.width=“320” height=“240”：定义视频播放器的宽高。设置这个会让页面对视频播放器部分空间进行保留，入不设置一开始不会保留可能造成页面布局混乱

4.loop=“loop”：规定视频结束后将重新开始播放

5.preload属性：auto表示页面加载后载入整个视频；meta只载入元数据；none：不载入视频

6.src：规定要播放视频的url，支持的视频格式：MP4/WebM/Ogg

二、video常用API

1.currentTime：表示当前播放的时间，可以通过js的操作进行修改，反映到播放进度上

2.load()方法：加载视频；play()方法：播放视频；pause()方法：暂停视频

3.volume：表示当前的声音大小，可通过js调节

4.muted：true表示静音，false表示不静音

5.playbackRate：设置播放速度快慢，默认是1表示按1秒播放

三、使用js控制video实例

通过元素选择器获取对应的<video>元素：var myVideo = document.getElementById(“video”)

myVideo.play()：让视频开始播放；myVideo.pause()：让视频停止播放

可以通过myVideo.height和myVideo.width对视频的大小进行设定

四、source标签

<video>之内可以放置<source>设置多个video资源，可以是同一个视频资源的不同格式，如下：

<video id=“video” width=“420”>
    <scource src=“a.mp4” type=“video/mp4”>
    <scource src=“a.ogg” type=“video/ogg”>
</video>

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！

web前端代码规范 html5media html5播放器

本文由 @沉沙发布于职坐标。未经许可，禁止转载。

喜欢 | 0

不喜欢 | 0

看完这篇文章有何感觉？已经有0人表态，0%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

WEB前端 直通车

索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈

海同师资推荐更多>>

黄骈联系TA

认证System Analyst，System Architect

程光淼联系TA

精通C、C++等语言、智能芯片开发

热门就业培训班更多>>

【零基础】人工智能+Python全栈开发课程

HTML5/CSS330天热搜词更多>>

html5+css3从入门到精通源码精通html5和css3 html5css3教程下载 html5+css3从入门到精通pdf html5经典实例 html5+css3从入门到精通如何 html5 css3入门 html5css3从入门到精通视频教程 html5 css3入门到精通 html5css3教程 html5教程技巧 html5零基础教程 html5+css3 html5可以做什么 html5+css3从入门到精通下载 html5从入门到精通来自微博html5版是什么 html5教程当当 html5从入门到精通pdf html5个人简历模板