详解html5的video标签测试应用

百变鹏仔 2个月前 (10-18) #H5教程

文章标签详解

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(&#39;hary_run&#39;);">快进</button><button id="stop_run" style="width:100px; height:35px; cursor:pointer;" onclick="javascript:controlTV(&#39;stop_run&#39;);">暂停</button><button id="current_run" style="width:100px; height:35px; cursor:pointer;" disabled=true onclick="javascript:controlTV(&#39;current_run&#39;);">播放</button><button id="open_voice" style="width:100px; height:35px; cursor:pointer;" onclick="javascript:controlTV(&#39;open_voice&#39;);">静音</button><button id="close_voice" style="width:100px; height:35px; cursor:pointer;" disabled=true onclick="javascript:controlTV(&#39;close_voice&#39;);">取消静音</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;// 获取媒体播放Idvar 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(){// 获取媒体播放Idvar 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(){// 获取媒体播放Idvar 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标签测试应用

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集