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自定义滚动条样式写法
Dec 25 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
html5表单的required属性使用
Jul 07 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快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
JSON取值前判断
2014/12/23 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
JS严格模式知识点总结
2018/02/27 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
深入理解python函数递归和生成器
2016/06/06 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
python中的插入排序的简单用法
2021/01/19 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
会计系中文个人求职信
2013/12/24 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
工程建设实施方案
2014/03/14 职场文书
公司委托书范本5篇
2014/09/20 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
教师个人自我评价
2015/03/04 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
python模板入门教程之flask Jinja
2022/04/11 Python