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的使用方法介紹

總結

以上是生活随笔為你收集整理的html5应用测试方法,详解html5的video标签测试应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。