跟KingDZ學HTML5之二 再見Audio和Video
阿新 • • 發佈：2017-05-31
width ava family video color 很好 用法 spa oop
呵呵，大家別見怪啊，這篇文章可不是和這兩個標簽 說BYE-BYE 而是，進一步的 運用這兩個標簽。
好了，我們這節課一開始，第一個例子，用JS控制 這兩個標簽，哦，對了，我之講解一個了，這兩個哥們的功能太像了，其他的大夥自己去理解吧。
<! DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function Show() {
var video = document.createElement(‘video‘);
video.src = ‘c:/text/1.mp4‘;
video.controls = true;
document.body.appendChild(video);
}
</script>
</head>
<body>
<input type="button" value="顯示視頻" onclick="Show();"/>
<body>
</html>
這個就是我們用腳本去創建一個 video 對象了，呵呵。
好了，我們當然也可以這麽著寫的
<! doctype html>
<html>
<body>
<video controls="true" width="320" height="240">不支持這個標簽</video>
<input type="button" value="加載視頻" onclick="document.getElementsByTagName(‘video‘)[0].src=‘c:/text/1.mp4‘"/>
<body>
</html>
好了，呵呵，這個是不是可以寫成，動態加載自己的視頻文件呢？
HTML5開發的代碼的 格式更加的 多樣化，你可以
用下面的三種格式去 寫HTML5的代碼。
<video loop>
<video loop="">
<video loop="loop">
上面的三種代碼都是正確的。
當然，你也可以自己給video 標簽，寫出來自己的 開始和結束
<! doctype html>
<html>
<head>
</head>
<body>
<video controls="true" width="320" height="240">不支持這個標簽</video>
<input type="button" value="加載視頻" onclick="document.getElementsByTagName(‘video‘)[0].src=‘c:/text/1.mp4‘"/>
<input type="button" value="播放" onclick="document.getElementsByTagName(‘video‘)[0].play()" />
<input type="button" value="暫停" onclick="document.getElementsByTagName(‘video‘)[0].pause()" />
<body>
</html>
當然你也可以做一個滾動條效果。【自己的滾動條哦】
<input type="range" step="any" id="seekbar"/>
在這裏，我就不給大家實現了，就是 運用 JS 來控制的。
我們也可以實現 快放 和 慢放。
下面，我給大家慢慢的說一些 我在做 HTML5的實例時間的 覺得很好的東西
首先
<button class="play" title="play">►</button/>
大家看看是什麽情況，哈哈
然後是
<button class="play" title="play">▐▐</button/>
哈哈。歡迎大家 和我交流 這兩個標簽的用法，再見啦。
跟KingDZ學HTML5之二 再見Audio和Video