站长资讯网1、video标签的使用
属性：src（要播放的音频文件路径）、autoplay（是否自动播放）、control（进度条）、loop（循环播放）、onended（是否播放完毕的是一个事件）
2、实现了一个简单的播放器
界面如下：
3、功能
主要通过onclick和onended事件来完成的，具体上面有的都实现了，不过音频文件的取名是有要求的，具体看代码
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 video标签只能放声音不能放视频的解决办法
2. IIS的MIME未注册MP4类型，导致无法识别vidoe标签的解决办法
3. 分享HTML5制作Banner的实例
4. 概述HTML5的强大与未来发展
5. 最新的h5标签datalis的使用方法介绍
