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 相关文章推荐
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
详解Node全局变量global模块
2017/09/28 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
vue项目环境变量配置的实现方法
2018/10/12 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
粗略分析Python中的内存泄漏
2015/04/23 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
python调用webservice接口的实现
2019/07/12 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
python制作微博图片爬取工具
2021/01/16 Python
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
医院总经理职责
2013/12/26 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
城管个人总结
2015/02/28 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS