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


Posted in HTML / CSS onAugust 05, 2020

要实现网页播放视频在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项目,将资源文件放入项目,目录结构如下:

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

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

<video id="myVedio" autoplay="autoplay" controls="controls" width="800px">
	<source src="video/1.webm"></source>
</video>

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

<source>标签通过src设置视频位置,此时的效果是这样的:

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

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

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

添加<ul>,<li>实现列表的显示:

<ul>
	<li>视频一</li>
	<li>视频二</li>
	<li>视频三</li>
</ul>

为了显示效果更好可以添加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标签实现视频循环播放的示例代码

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

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 < vedioLi.length; j++) {//循环条件为列表的长度
	vedioLi[j].onclick = function() {
	        for(var m = 0; m < vedioLi.length; m++) {
	                vedioLi[m].style.backgroundColor = "black";//为每个类表设置背景为黑色
	        }
                for(var i = 0; i < vedioLi.length; i++) {
		        if(vedioLi[i] == this) { //判断点中的是否为该项
		                vedioLi[i].style.backgroundColor = "darkgray"; //将点击后的背景设置为灰白
		                arryNumber = i; //将当前播放设置为选中的下标
		                myVideo.src = "video/" + vedioArry[i]; //设置播放视频
		                myVideo.play(); //开始播放
	                }
	        }
        }
}

接下来实现循环播放:

myVideo.addEventListener("ended", function() {//为vedio添加ended监听,当视频播放完毕后执行对应函数
	if(arryNumber == (vedioArry.length - 1)) { //判断是否到了最后一个视频
	        vedioLi[vedioLi.length - 1].style.backgroundColor = "black"; //将前一个列表颜色设为black
		vedioLi[0].style.backgroundColor = "darkgray"; //将当前视频设置为灰白
		myVideo.src = "video/"+vedioArry[0]; //播放第一个视频
		myVideo.play();
		arryNumber = 0;//将下标重设为 0
	} else {
		arryNumber += 1; //每播放一次则将下标加一
		myVideo.src = "video/" + vedioArry[arryNumber];
		vedioLi[arryNumber].style.backgroundColor = "darkgray";
		vedioLi[arryNumber - 1].style.backgroundColor = "black";
		myVideo.play();
	}
 
});

效果如下:

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

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

到此这篇关于HTML5 通过Vedio标签实现视频循环播放的示例代码的文章就介绍到这了,更多相关HTML5视频循环播放内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
css3 中实现炫酷的loading效果
Apr 26 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 #HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 #HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 #HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 #HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 #HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 #HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 #HTML / CSS
You might like
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
让python在hadoop上跑起来
2016/01/27 Python
Python中return self的用法详解
2018/07/27 Python
pytorch 共享参数的示例
2019/08/17 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
Python3 assert断言实现原理解析
2020/03/02 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
椰子猫砂:CatSpot
2018/08/27 全球购物
应届生会计求职信
2013/11/11 职场文书
继承公证书
2014/04/09 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
python中__slots__节约内存的具体做法
2021/07/04 Python
R9700摩机记
2022/04/05 无线电
python 闭包函数详细介绍
2022/04/19 Python
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL