HTML5学习笔记之Video视频简单用法
文章来源：http://www.cnblogs.com/znieyu/archive/2011/10/27/2226927.html
之前将w3school上的关于html5东西都看了一遍没有通透的理解以后该如何应用，最近无聊看了一下博客园 有没有关于html5文章，看到 苦尽甘来 兄弟写了两篇html5两个标签的用法，呵呵作为一个做技术的我深感自己要是不动手去试验一下别人的代码心里就不舒服，先别说我无聊啊！！！我确实无聊，于是我就看了一下这位兄弟的代码，有那么一个小bug，因此兄弟咱们都是做技术的，希望您不建议我用您的“随笔”做标题.小小的改动了一下，因为都是无聊嘛！！！希望您不要介意.........
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Video标签用法详细</title>
<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;
video.autoplay = true;
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>
</body></html>
浙公网安备 33010602011771号