html5播放视频自动循环播放,HTML5 通过Vedio标签实现视频循环播放的示例代码

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

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

存在的问题：

需要flash，效率低

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

iPad 和 iPhone 不能显示 Flash 视频

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

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

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

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

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

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

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

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

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

添加

实现列表的显示：

视频一

视频二

视频三

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

li {

list-style: none;

background-color: black;

color: white;

text-align: center;

margin: 5px auto;

width: 800px;

font-family: "楷体";

font-size: 30px;

}

之后显示效果：

接下来就是编写脚本控制点击列表播放该视频了

var myVideo = document.getElementById("myVedio"); //通过js获取到vedio标签实例

var vedioLi = document.getElementsByTagName("li"); //获取视频列表

var vedioArry = new Array("1.webm", "2.webm", "3.webm"); //设置播放视频列表数组

var arryNumber = 0; //设置默认播放位置，方便后面循环播放

通过for循环为视频列表添加onClick()方法，实现点中哪个就播放对应视频：

for(var j = 0; j

接下来实现循环播放：

效果如下：

原创文章，作者：hangyu，如若转载，请注明出处：https://youhui.biz/1078.html

html5播放视频自动循环播放,HTML5 通过Vedio标签实现视频循环播放的示例代码相关推荐

html5播放器自动全屏,HTML5 video播放器全屏(fullScreen)实现的方法
这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下首先来说,这个标题具有误导性,但这样设置改标题也是主要因为vid ...
html5播放器自动全屏,HTML5 video播放器全屏(fullScreen)方法实例
首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多在html5中,全屏方法可以适用于很多html 元素,不仅仅是video复制代码代码如下: 全屏问题 *{ paddi ...
html自动缩放不出现滚动条,HTML页面缩小后显示滚动条的示例代码
这里记录一下如何使得HTML页面缩小之后,底部出现滚动条,使得可以通过滚动滚动条来浏览由于界面缩小而被掩盖的地方. 说一下这样做的好处. 首先,一般界面缩小之后不出现滚动条,用户就不能访问被隐藏的地方 ...
html5离开网页自动暂停,通过html5代码在网页中实现播放和暂停音乐mp3,mav等文
介绍通过html5代码在网页中实现播放和暂停音乐mp3,mav等文件的具体操作方法.这样对于用户来说,在线可播放功能能大大提高站内效率也可带来一定的流量.希望对有需要的朋友有所帮助.这里我们需要先了解 ...
html音乐播放器自动切歌,html5和css3以及jquery实现音乐播放器
这篇文章主要讲实现音乐播放器的代码(html5+css3+jquery),需要的朋友可以参考下看下面的效果图很不错吧,是怎么实现的呢?下面小编给大家分享下我的一番宝物,Lisa唱的在angel b ...
html5登录页面自动记住密码,html5超简单的localStorage实现记住密码的功能实现
HTML5 提供了两种在客户端存储数据的新方法: localStorage – 没有时间限制的数据存储 sessionStorage – 针对一个 session 的数据存储之前,这些都是由 coo ...
html5 打开网页自动全屏,html5 网页全屏显示
1.统一样式因为不同的浏览器的样式不一致,所以,最好统一样式 :-webkit-full-screen { /* properties */ } :-moz-full-screen { /* pro ...
python视频行人检测_python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
参照opencv官网例程写了一个基于python的行人检测程序,实现了和自带检测器基本一致的检测效果. opencv版本:3.4.0 训练集和opencv官方用了同一个,可以从http://pasca ...
iOS 微信音视频自动播放原生接口WeixinJSBridge API(一些整理小技巧)
原文链接1:https://www.w3ctech.com/topic/1165 原文链接2:https://www.cnblogs.com/jasonduan/p/5635048.html 做一下整 ...

html5播放视频自动循环播放,HTML5 通过Vedio标签实现视频循环播放的示例代码

html5播放视频自动循环播放,HTML5 通过Vedio标签实现视频循环播放的示例代码相关推荐

最新文章

热门文章