- 对于html5的视频播放，想必听过的人都感到很兴奋吧，html播放视频不需要任何插件播放，点击就可以播放。是不是感觉很强大！
关于html播放视频的技术优势
- 关于视频不用插件播放，点击就能看
- 跨平台、好升级、好维护，开发成本相对原生APP低很多
- 对移动的良好支持，支持手势，本地存储和视频续播等，通过H5就可以把自己的网站移动化。
- 更为简洁的代码，更好的交互
- 支持游戏开发
看到以上的优点，是不是都迫不及待了呢！以上附上我的实例
<!DOCTYPE html>
<title>Video标签用法详细</title>
<head>
<style type="text/css">
#source{ width:100%; height:20px; line-height:20px; border-width:0px}
#start{ width:100px; height:30px}
#pause{ width:100px; height:30px}
#goon{ width:100px; height:30px}
</style>
<script type="text/javascript">
// 获取视频开始播放
function start() {
var source = document.getElementById("source");
var videoTest=document.getElementById("videoTest");
if (videoTest == null) {
var video = document.createElement("video");
video.width = 400;
video.height = 250;
video.id = "videoTest";
video.src = source.value; //视频地址
video.controls = true; //html5新特性controls
// 属性规定浏览器应该为视频提供播放控件。
// 如果设置了该属性，则规定不存在作者设置的脚本控件。
video.autoplay = false; //是否自动播放
document.body.appendChild(video);
} else {
//其他动作
}
};
// 暂停视频播放
function pause(){
var video = document.getElementById("videoTest");
video.pause();
}
// 积蓄视频播放
function goon(){
var video = document.getElementById("videoTest");
video.play();
}
</script>
</head>
<body><div>
<input id="source" value="http://demoplayer.inrete.eu/video
/samplevideo_hq.old.mp4" type="text" />
<p><input id="start" type="button" value="加载视频文件"
onclick="start();" /></p>
<p><input id="pause" type="button" value="暂停视频文件"
onclick="pause();" /></p>
<p><input id="goon" type="button" value="继续视频文件"
onclick="goon();" /></p>
</div>
</boby>
</html>