站長(zhǎng)資訊網(wǎng)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>
【相關(guān)推薦】
1. H5 video標(biāo)簽只能放聲音不能放視頻的解決辦法
2. IIS的MIME未注冊(cè)MP4類(lèi)型，導(dǎo)致無(wú)法識(shí)別vidoe標(biāo)簽的解決辦法
3. 分享HTML5制作Banner的實(shí)例
4. 概述HTML5的強(qiáng)大與未來(lái)發(fā)展
5. 最新的h5標(biāo)簽datalis的使用方法介紹
