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 相关文章推荐
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 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抽奖算法程序代码分享
2015/10/08 PHP
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
python绘制中国大陆人口热力图
2018/11/07 Python
python3安装speech语音模块的方法
2018/12/24 Python
Django之模型层多表操作的实现
2019/01/08 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
2013年高中生自我评价
2013/10/23 职场文书
现场施工员岗位职责
2014/03/10 职场文书
出国留学经济担保书
2014/04/01 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
小学优秀教师材料
2014/12/15 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
辞职申请书范本
2019/05/20 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript