详解html5的video标签测试应用-Tutorial H5-php.cn

详解html5的video标签测试应用

零下一度

Lepaskan： 2017-05-19 16:50:20

asal

2798 orang telah melayarinya

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;
// 获取媒体播放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>

Salin selepas log masuk

【相关推荐】

1. H5 video标签只能放声音不能放视频的解决办法

2. IIS的MIME未注册MP4类型，导致无法识别vidoe标签的解决办法

3. 分享HTML5制作Banner的实例

4. 概述HTML5的强大与未来发展

5. 最新的h5标签datalis的使用方法介绍

Atas ialah kandungan terperinci 详解html5的video标签测试应用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!