跟KingDZ學HTML5之二：再見Audio和Video
編輯：HTML5詳解
呵呵，大家別見怪啊，這篇文章可不是和這兩個標簽 說BYE-BYE 而是，進一步的 運用這兩個標簽。
好了，我們這節課一開始，第一個例子，用JS控制 這兩個標簽，哦，對了，我之講解一個了，這兩個哥們的功能太像了，其他的大伙自己去理解吧。
XML/Html Code復制內容到剪貼板- <! 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的代碼。
XML/Html Code復制內容到剪貼板- <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的實例時間的 覺得很好的東西
首先
XML/Html Code復制內容到剪貼板- <button class="play" title="play">►</button/>
然後是
- <button class="play" title="play">▐▐</button/>
哈哈。歡迎大家 和我交流 這兩個標簽的用法，再見啦
小編推薦
熱門推薦