HTML5如何通过Vedio标签实现视频循环播放
小编给大家分享一下HTML5如何通过Vedio标签实现视频循环播放,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
站在用户的角度思考问题,与客户深入沟通,找到奉化网站设计与奉化网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广、国际域名空间、虚拟主机、企业邮箱。业务覆盖奉化地区。
要实现网页播放视频在HTML5以前是通过
存在的问题:
需要flash,效率低
如果浏览器不支持 Flash,那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频
将视频转换为其他格式,仍然不能在所有浏览器中播放
在HTML5后,播放网页视频就简单多了,一个
本人编写HTML5代码是使用HBuilder,个人觉得软件还不错,(主要的原因是该软件的快捷键和界面布局和Eclipse很相似,对于习惯了Eclipse操作的我来说真是犹如再见故友的感觉啊,有木有)
先新建Web项目,将资源文件放入项目,目录结构如下:
接着直接在index.html中编写代码就行了:
vedio标签,中设置autoplay,是为了视频在页面加载完毕后就自动播放,controls添加控制条工具
这就是
之后就是设置播放列表,使点击列表播放后播放对应的视频:
添加
- ,
- 实现列表的显示:
- 视频一
- 视频二
- 视频三
为了显示效果更好可以添加css样式,为正在播放的视频添加背景色:
li { list-style: none; background-color: black; color: white; text-align: center; margin: 5px auto; width: 800px; font-family: "楷体"; font-size: 30px; }
之后显示效果:
接下来就是编写