html5中video標(biāo)簽的用法
這篇文章主要介紹html5中video標(biāo)簽的用法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)專注于運(yùn)河網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供運(yùn)河營(yíng)銷型網(wǎng)站建設(shè)，運(yùn)河網(wǎng)站制作、運(yùn)河網(wǎng)頁(yè)設(shè)計(jì)、運(yùn)河網(wǎng)站官網(wǎng)定制、成都小程序開(kāi)發(fā)服務(wù)，打造運(yùn)河網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供運(yùn)河網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
1、video標(biāo)簽的使用
屬性：src（要播放的音頻文件路徑）、autoplay（是否自動(dòng)播放）、control（進(jìn)度條）、loop（循環(huán)播放）、onended（是否播放完畢的是一個(gè)事件）
2、實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的播放器
界面如下：
3、功能
主要通過(guò)onclick和onended事件來(lái)完成的，具體上面有的都實(shí)現(xiàn)了，不過(guò)音頻文件的取名是有要求的，具體看代碼
4、代碼:
<!DOCTYPE HTML>
<html>
<head>
<title>播放視頻</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
<p style="cursor:pointer;" onclick="javascript:playvideo(1);">播放視頻</p>
<p style="cursor:pointer;" onclick="javascript:playvideo(2);">關(guān)閉視頻</p>
<video id="video" style="width:1024px; height:600px; margin:0 auto; display:none;" src="./mybroadcast2.mkv" autoplay="autoplay" controls="controls" onended="javascript:videoover();" onclick="javascript:screen_stop();" ondblclick="javascript:double_click();">您的瀏覽器暫不支持播放該視頻，請(qǐng)升級(jí)至最新版瀏覽器。</video>
<button id="hary_run" style="width:100px; height:35px; cursor:pointer;" onclick="javascript:controlTV('hary_run');">快進(jìn)</button>
<button id="stop_run" style="width:100px; height:35px; cursor:pointer;" onclick="javascript:controlTV('stop_run');">暫停</button>
<button id="current_run" style="width:100px; height:35px; cursor:pointer;" disabled=true onclick="javascript:controlTV('current_run');">播放</button>
<button id="open_voice" style="width:100px; height:35px; cursor:pointer;" onclick="javascript:controlTV('open_voice');">靜音</button>
<button id="close_voice" style="width:100px; height:35px; cursor:pointer;" disabled=true onclick="javascript:controlTV('close_voice');">取消靜音</button>
</body>
<script>
function playvideo(type){
var openvideo = document.getElementById("video");
if (type == 1){
openvideo.style.display = "block";
} else if (type == 2){
openvideo.style.display = "none";
}
}
// 讓視頻循環(huán)列表播放
function videoover(){
var videoId = document.getElementById("video");
var video_path = videoId.src;
var path_begin = video_path.substring(0, video_path.lastIndexOf(".")-1);
var path_end = video_path.substring(video_path.lastIndexOf("."));
var num = parseInt(video_path.charAt(video_path.lastIndexOf(".")-1));
if (num >= 3) {
num = 0;
} else {
num++;
}
videoId.src = path_begin + num.toString() + path_end;
}
// 控制視頻
function controlTV(oprationId){
var runId = document.getElementById(oprationId);
var btn_value = runId.innerText;
// 獲取媒體播放Id
var videoId = document.getElementById("video");
if ("快進(jìn)" == btn_value){
// 獲取當(dāng)前播放進(jìn)度
var current_pro = videoId.currentTime;
videoId.currentTime = current_pro + 10;
} else if ("暫停" == btn_value) {
videoId.pause();
runId.disabled = true;
var broad_btn = document.getElementById("current_run");
broad_btn.disabled = false;
} else if ("播放" == btn_value) {
videoId.play();
runId.disabled = true;
var stop_btn = document.getElementById("stop_run");
stop_btn.disabled = false;
} else if ("靜音" == btn_value) {
videoId.muted = true;
runId.disabled = true;
btn_disabled = document.getElementById("close_voice");
btn_disabled.disabled = false;
} else if ("取消靜音" == btn_value) {
videoId.muted = false;
runId.disabled = true;
var btn_disabled = document.getElementById("open_voice");
btn_disabled.disabled = false;
}
}
function screen_stop(){
// 獲取媒體播放Id
var videoId = document.getElementById("video");
// 判斷是否已暫停
if (videoId.paused) {
videoId.play();
} else {
videoId.pause();
}
}
/*----------------------------------兼容性解決方案---------------------------------------------*/
// 進(jìn)入全屏
function requestFullScrren(){
var de = document.documentElement;
if (de.requestFullscreen) {
// W3C 提議
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
// Firefox 10+
de.moRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
// Webkit (works in Safari5.1 and Chrome 15)
de.webkitRequestFullScreen();
}
}
// 退出全屏
function exitFullScreen(){
var de = document;
if (de.exitFullscreen) {
// W3C 提議
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
// Firefox 10+
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
// Webkit (works in Safari5.1 and Chrome 15)
de.webkitCancelFullScreen();
}
}
// 雙擊全屏
function double_click(){
if (requestFullScrren) {
requestFullScrren();
} else {
exitFullScreen();
}
}
// 自動(dòng)加載默認(rèn)配置(未完成)
/**function onload_property(){
// 獲取媒體播放Id
var videoId = document.getElementById("video");
var file = new ActiveXObject("Scripting.FileSystemObject");
var inputStream = file.OpenTextFile("customvideo.properties");
var content = "";
while(!inputStream.atEndOfLine){
content + inputStream.readLine + "\n";
}
inputStream.close();
}
window.onload = onload_property;**/
</script>
</html>以上是“html5中video標(biāo)簽的用法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
名稱欄目：html5中video標(biāo)簽的用法
鏈接分享：http://m.rwnh.cn/article40/jcgpho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)頁(yè)設(shè)計(jì)公司、關(guān)鍵詞優(yōu)化、虛擬主機(jī)、網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 企業(yè)網(wǎng)站制作方案要怎么寫(xiě) 2022-07-07
- 企業(yè)網(wǎng)站制作的六大功能 2023-01-09
- 企業(yè)網(wǎng)站制作公司 2016-12-03
- 營(yíng)銷型企業(yè)網(wǎng)站制作的幾個(gè)步驟，你了解嗎？ 2021-09-14
- 企業(yè)網(wǎng)站制作方案,網(wǎng)站制作方案書(shū),門戶網(wǎng)站制作方案 2021-08-31
- 企業(yè)網(wǎng)站制作公司的宣傳方式 2016-10-06
- 如何進(jìn)行企業(yè)網(wǎng)站制作才能顯得更高端 2021-04-26
- 企業(yè)網(wǎng)站制作對(duì)企業(yè)發(fā)展的好處 2016-10-26
- 企業(yè)網(wǎng)站制作有哪些好處？ 2014-11-20
- 企業(yè)網(wǎng)站制作需要考慮的幾個(gè)方面 2021-09-27
- 企業(yè)網(wǎng)站制作值得注意的12個(gè)事項(xiàng)是什么？ 2014-01-25
- 銀海企業(yè)網(wǎng)站制作要遵守哪些原則？ 2021-01-06