要实现网页播放视频在HTML5以前是通过标签
标签的作用是在 HTML页面中嵌入多媒体元素
标签的作用是在 HTML页面中嵌入多媒体元素
存在的问题:
需要flash,效率低
如果浏览器不支持 Flash,那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频
将视频转换为其他格式,仍然不能在所有浏览器中播放
在HTML5后,播放网页视频就简单多了,一个解决所有问题,废话不多说,直接进入正题:
本人编写HTML5代码是使用HBuilder,个人觉得软件还不错,(主要的原因是该软件的快捷键和界面布局和Eclipse很相似,对于习惯了Eclipse操作的我来说真是犹如再见故友的感觉啊,有木有)
先新建Web项目,将资源文件放入项目,目录结构如下:
接着直接在index.html中编写代码就行了:
vedio标签,中设置autoplay,是为了视频在页面加载完毕后就自动播放,controls添加控制条工具
标签通过src设置视频位置,此时的效果是这样的:
这就是标签的神奇之处了,只需一个标签搞定所有事
之后就是设置播放列表,使点击列表播放后播放对应的视频:
添加
,
实现列表的显示:
视频一
视频二
视频三
为了显示效果更好可以添加css样式,为正在播放的视频添加背景色:
li {
list-style: none;
background-color: black;
color: white;
text-align: center;
margin: 5px auto;
width: 800px;
font-family: "楷体";
font-size: 30px;
}
之后显示效果:
接下来就是编写脚本控制点击列表播放该视频了
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
接下来实现循环播放:
效果如下:
原创文章,作者:hangyu,如若转载,请注明出处:https://youhui.biz/1078.html