1、video标签的使用

属性：src(要播放的音频文件路径)、autoplay(是否自动播放)、control(进度条)、loop(循环播放)、onended(是否播放完毕的是一个事件)

2、实现了一个简单的播放器

界面如下：

3、功能

主要通过onclick和onended事件来完成的，具体上面有的都实现了，不过音频文件的取名是有要求的，具体看代码

4、代码:

播放视频

播放视频

关闭视频

您的浏览器暂不支持播放该视频，请升级至最新版浏览器。

快进

暂停

播放

静音

取消静音

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;**/

【相关推荐】

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

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

3. 分享HTML5制作Banner的实例

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

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