1. video タグの使用
属性: src (再生するオーディオ ファイルのパス)、autoplay (自動的に再生するかどうか)、control (プログレス バー)、loop (ループ再生)、onended (再生するかどうか)完了した再生はイベントです)
2. シンプルなプレーヤーを実装します
インターフェースは次のとおりです:
3. 関数
は主に、上記のすべてのイベントによって完了します。
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);">关闭视频</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();">您的浏览器暂不支持播放该视频,请升级至最新版浏览器。</video> <button id="hary_run" style="width:100px; height:35px; cursor:pointer;" onclick="javascript:controlTV('hary_run');">快进</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"; } } // 让视频循环列表播放 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 ("快进" == btn_value){ // 获取当前播放进度 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(); } } /*----------------------------------兼容性解决方案---------------------------------------------*/ // 进入全屏 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(); } } // 自动加载默认配置(未完成) /**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>
[関連する推奨事項]
1. H5 ビデオ タグができる問題の解決策。音声のみを再生しますが、ビデオは再生しません
2. IIS の MIME は MP4 タイプを登録しないため、vidoe タグが認識されないという解決策が発生します
3. HTML5 でバナーを作成する例を共有しますHTML5の能力と今後の展開以上がHTML5ビデオタグテストアプリケーションの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。