网站建设 网站建设技术 网页设计 html/css
HTML5 通过Vedio标签实现视频循环播放的示例代码
人浏览 发布时间：2021-02-01
要实现网页播放视频在HTML5以前是通过<embed>标签
<embed> 标签的作用是在 HTML页面中嵌入多媒体元素
<embed src="1.swf"width="400">
<object> 标签的作用是在 HTML页面中嵌入多媒体元素
<object data="1.swf"width="400"></object>
存在的问题：
需要flash，效率低
如果浏览器不支持 Flash，那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频
将视频转换为其他格式，仍然不能在所有浏览器中播放
在HTML5后，播放网页视频就简单多了，一个<vedio></vedio>解决所有问题，废话不多说，直接进入正题：
本人编写HTML5代码是使用HBuilder，个人觉得软件还不错，（主要的原因是该软件的快捷键和界面布局和Eclipse很相似，对于习惯了Eclipse操作的我来说真是犹如再见故友的感觉啊，有木有）
先新建Web项目，将资源文件放入项目，目录结构如下：
接着直接在index.html中编写代码就行了：
vedio标签，中设置autoplay，是为了视频在页面加载完毕后就自动播放，controls添加控制条工具
<source>标签通过src设置视频位置，此时的效果是这样的：
这就是<vedio>标签的神奇之处了，只需一个标签搞定所有事
之后就是设置播放列表，使点击列表播放后播放对应的视频：
添加<ul>,<li>实现列表的显示：
为了显示效果更好可以添加css样式，为正在播放的视频添加背景色：
之后显示效果：
接下来就是编写<script>脚本控制点击列表播放该视频了
通过for循环为视频列表添加onClick()方法，实现点中哪个就播放对应视频：
接下来实现循环播放：
效果如下：
到此这篇关于HTML5 通过Vedio标签实现视频循环播放的示例代码的文章就介绍到这了
（编辑：360度神搜网）