HTML5 通过Vedio标签实现视频循环播放
要实现网页播放视频在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项目,将资源文件放入项目,目录结构如下:
接着直接在index.html中编写代码就行了:
<video id="myVedio" autoplay="autoplay" controls="controls" width="800px"><source src="video/1.webm"></source>
</video>
vedio标签,中设置autoplay,是为了视频在页面加载完毕后就自动播放,controls添加控制条工具
<source>标签通过src设置视频位置,此时的效果是这样的:
这就是<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;
}
之后显示效果:
接下来就是编写<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"; //将前一个列表颜色设为blackvedioLi[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();}});
效果如下:
完结,转载请注明出处https://blog.csdn.net/huzixianshen/article/details/79805981
HTML5 通过Vedio标签实现视频循环播放相关推荐
- html5播放视频自动循环播放,HTML5 通过Vedio标签实现视频循环播放的示例代码
要实现网页播放视频在HTML5以前是通过标签 标签的作用是在 HTML页面中嵌入多媒体元素 标签的作用是在 HTML页面中嵌入多媒体元素 存在的问题: 需要flash,效率低 如果浏览器不支持 Fla ...
- Springboot项目使用html5的video标签完成视频播放功能
Springboot项目使用html5的video标签完成视频播放功能 1.首先引入pom文件: pom.xml 2.使用video标签来播放视频: 3.视频播放功能的具体实现: 文件的上传与下载会另 ...
- 关于今天写Flex视频循环播放所出现的sdk问题
问题描述:用Flex写的Air视频循环播放,当在FB编辑器中运行测试时,视频可以正常循环,当不内嵌Air打包时就会出现播放一段时间后暂停不播放了. 问题分析:主要是在编辑器里运行正常,一打包就会出现暂 ...
- 【怎样制作ppt课件】Focusky教程 | 设置插入的视频循环播放
(Focusky动画演示大师简称"FS软件") 插入视频后如何设置视频循环播放,操作如下: 1. 插入视频 点击"插入"--"视频"或者点击 ...
- Opencv(C++)笔记--视频读取、视频属性查看、视频循环播放
目录 1--视频读取代码 2--视频属性查看 3--视频循环播放代码 1--视频读取代码 # include<opencv2/opencv.hpp> # include<cstdio ...
- html网页制作教程按钮添加,网页制作html5自定义video标签的海报与播放按钮功能...
一.问题 1.默认播放按键不好看 2.设置自定义封面图 以上这两点都想自定义 二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三.步骤分解 1.海报图片作为div ...
- html video 修改封面,html5自定义video标签的海报与播放按钮功能
一.问题 1.默认播放按键不好看 2.设置自定义封面图 以上这两点都想自定义 二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三.步骤分解 1.海报图片作为div ...
- 用html做成的音频播放器,使用HTML5的Audio标签打造WEB音频播放器
WEB中的Audio标签 HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:标签.使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等,详情请 ...
- video JS实现多视频循环播放
video 的实现 <video id="myvideo" width="100%" height="auto" controls=& ...
- audio标签无法自动循环播放问题
项目中有类似于美团外卖那种语音提示,如果有人预约,就会有消息提示,但是Chorme浏览器无法自动循环播放,之前在网上各种百度也没找到解决办法,最后经过一番努力,终于实现了这种效果.代码如下: //这是 ...
最新文章
- 10 个免费的服务器监控工具推荐
- WeakHashMap和四种引用总结:
- 001_Maven入门
- 标准访问控制列表配置(51cto: 实验 34)
- 【STM32】ESP8266模块简介
- AWS如何迁移实例到另一个区?
- 计算机加入域 不能访问网络位置 解决办法
- linux上怎么快速删除一个目录?
- Mr.J--Java异常处理总结
- Java初学者需掌握的30个概念
- Java 源码 —— List
- mysql怎么导入sql文件_如何将sql文件导入mysql
- 1分钟教会你cad如何转pdf
- 黑马程序员全套Java教程_Java基础教程_API(十四)
- sepic电路MATLAB,cuk电路matlab仿真
- 苹果手机怎么在照片上添加文字_手机照片如何添加文字?原来方法这么简单,花1分钟手把手教...
- 利用Python3将EXCEL中某列特殊字符之前的汉字取首字母,特殊字符之后的汉字取全拼,然后用下划线“_”相连,写入下一列...
- 【经典算法】:英雄联盟中打字屏蔽系统的实现
- Linux 获取磁盘唯一ID方式
- 互联网产品的定义及分类
热门文章
- 张至顺道长羽化登仙+说修行(道经每日清修)
- 如何编辑已存在的.fig文件
- 中医教你按摩手指,治疗百病
- F12解决网页不能复制
- word文档太大怎么压缩?快速压缩word文档
- 【C语言】abs()用法及其他绝对值函数
- cad计算机土方软件,CAD土方工程量算量插件(土方工程量计算工具)V1.1 正式版
- mysql安装出现change_mysql-5.msi安装出现change,repaire,or remove installation
- IR2104半桥驱动
- 技术系列课回顾 | 网易云信变声技术之变调不变速算法