HTML5視訊video開發demo例子
HTML5的video可以使用DOM的方式進行控制。video元素同樣擁有方法、屬性和事件。
比如它擁有的方法用於播放、暫停以及載入等。其中的屬性(比如時長、音量等)可以被讀取或設定。
其中的 DOM 事件能夠通知您,比方說,video元素開始播放、已暫停,已停止,等等。
廢話少說了,看下面的例項吧。
比如它擁有的方法用於播放、暫停以及載入等。其中的屬性(比如時長、音量等)可以被讀取或設定。
其中的 DOM 事件能夠通知您,比方說,video元素開始播放、已暫停,已停止,等等。
廢話少說了,看下面的例項吧。
為視訊建立簡單的播放/暫停以及調整尺寸控制元件:
<!DOCTYPE html>
<html>
<body>
歡迎大家關注我的部落格!如有疑問,請加QQ群:135430763共同學習!
<div style="text-align:center;">
<button onclick="playPause()">播放/暫停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video1" width="420" style="margin-top:15px;">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg" />
你的瀏覽器不支援html5的video標籤
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause(){
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig(){
myVideo.width=560;
}
function makeSmall(){
myVideo.width=320;
}
function makeNormal(){
myVideo.width=420;
}
</script>
</body>
</html>
看看執行效果圖:
歡迎大家關注我的部落格!如有疑問,請加QQ群:135430763共同學習!
相關文章
- HTML5視訊videoHTMLIDE
- html5聲頻audio和視訊videoHTMLIDE
- ffmpeg demo decode_video.c例子流程圖IDE流程圖
- HTML5 video視訊字幕的使用和製作HTMLIDE
- WebView 視訊全屏播放(基於Html5 video)WebViewHTMLIDE
- 掌握HTML5中的多媒體–視訊(video)HTMLIDE
- HTML video 播放本地視訊HTMLIDE
- html5視訊HTML
- LongTail:HTML5視訊發展現狀AIHTML
- video.js+jquery+視訊雲IDEJSjQuery
- HTML5 音訊和視訊HTML音訊
- THINKPHP開發 優酷視訊網|線上視訊|PHP
- AceThinker Video Keeper 視訊下載工具IDE
- 短視訊app開發之ios小視訊開發經驗共享APPiOS
- html5–移動端視訊video的android相容,去除播放控制元件、全屏等HTMLIDEAndroid控制元件
- iOS VR視訊開發iOSVR
- video自定義實現視訊播放功能IDE
- Movavi Video Editor Plus 22,視訊處理IDE
- 基於HDPHP的視訊播客開發視訊PHP
- 視訊開發基礎篇
- Discuz 外掛開發視訊
- 使用vue控制video視訊和彈幕功能VueIDE
- 微信小程式 Video 視訊太小怎麼辦微信小程式IDE
- TunesKit AceMovi Video Editor for Mac(視訊編輯工具)IDEMac
- Movavi Video Editor Plus for Mac視訊編輯器IDEMac
- Cisdem Video Player for mac(高清視訊播放器)IDEMac播放器
- Tipard Video Converter Ultimate如何旋轉視訊?IDE
- Cisdem Video Converter Mac視訊轉換器IDEMac
- Cinematic Video Effects for Mac視訊調色軟體IDEMac
- Video元件:控制視訊的播放與暫停IDE元件
- html5 canvas實現高併發視訊彈幕功能HTMLCanvas
- HTML5 小動畫例子HTML動畫
- HTML5全屏的例子HTML
- java從SQS訂閱訊息 的demo, 要求保證訊息可靠投遞的例子Java
- php開發微信demoPHP
- Android 音視訊開發 視訊編碼,音訊編碼格式Android音訊
- iOS開發:音訊播放、錄音、視訊播放、拍照、視訊錄製iOS音訊
- Movavi Video Converter 22 Premium Mac(視訊音訊轉換器)IDEREMMac音訊