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的使用方法介绍
以上就是详解html5的video标签测试应用的详细内容。