资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

HTML5如何通过Vedio标签实现视频循环播放

小编给大家分享一下HTML5如何通过Vedio标签实现视频循环播放，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

站在用户的角度思考问题，与客户深入沟通，找到奉化网站设计与奉化网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、虚拟主机、企业邮箱。业务覆盖奉化地区。

要实现网页播放视频在HTML5以前是通过标签

标签的作用是在 HTML页面中嵌入多媒体元素

标签的作用是在 HTML页面中嵌入多媒体元素

存在的问题：

需要flash，效率低

如果浏览器不支持 Flash，那么视频将无法播放

iPad 和 iPhone 不能显示 Flash 视频

将视频转换为其他格式，仍然不能在所有浏览器中播放

在HTML5后，播放网页视频就简单多了，一个解决所有问题，废话不多说，直接进入正题：

本人编写HTML5代码是使用HBuilder，个人觉得软件还不错，（主要的原因是该软件的快捷键和界面布局和Eclipse很相似，对于习惯了Eclipse操作的我来说真是犹如再见故友的感觉啊，有木有）

先新建Web项目，将资源文件放入项目，目录结构如下：

HTML5如何通过Vedio标签实现视频循环播放

接着直接在index.html中编写代码就行了：

vedio标签，中设置autoplay，是为了视频在页面加载完毕后就自动播放，controls添加控制条工具

标签通过src设置视频位置，此时的效果是这样的：

HTML5如何通过Vedio标签实现视频循环播放

这就是标签的神奇之处了，只需一个标签搞定所有事

之后就是设置播放列表，使点击列表播放后播放对应的视频：

添加

    ,
  • 实现列表的显示：

      
	
    • 视频一
      • 
	
    • 视频二
      • 
	
    • 视频三
      •

    为了显示效果更好可以添加css样式，为正在播放的视频添加背景色：

    li {
	list-style: none;
        background-color: black;
	color: white;
	text-align: center;
	margin: 5px auto;
	width: 800px;
	font-family: "楷体";
	font-size: 30px;
}

    之后显示效果：

    HTML5如何通过Vedio标签实现视频循环播放

    接下来就是编写