Rumah >hujung hadapan web >Tutorial H5 >详解html5的video标签测试应用
详解html5的video标签测试应用
- 零下一度asal
- 2017-05-19 16:50:202816semak imbas
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>【相关推荐】
2. IIS的MIME未注册MP4类型，导致无法识别vidoe标签的解决办法
Atas ialah kandungan terperinci 详解html5的video标签测试应用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：用html5 ajax Java接口实现上传图片实例代码Artikel seterusnya：用html5实现一个简单的钟表外观