詳解html5的video標籤測試應用-H5教程-PHP中文網

首頁

web前端

H5教程

詳解html5的video標籤測試應用

May 19, 2017 pm 04:50 PM

1、video標籤的使用

屬性：src（要播放的音訊檔案路徑）、autoplay（是否自動播放）、control（進度條）、loop（循環播放）、onended（是否播放完畢的是一個事件）

2、實作了一個簡單的播放器

介面如下：

##3、功能

主要透過onclick和onended事件來完成的，具體上面有的都實現了，不過音訊檔案的取名是有要求的，具體看代碼

4、代碼:

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;播放视频&lt;/title&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;/&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p style=&quot;cursor:pointer;&quot; onclick=&quot;javascript:playvideo(1);&quot;&gt;播放视频&lt;/p&gt;
&lt;p style=&quot;cursor:pointer;&quot; onclick=&quot;javascript:playvideo(2);&quot;&gt;关闭视频&lt;/p&gt;
&lt;video id=&quot;video&quot; style=&quot;width:1024px; height:600px; margin:0 auto; display:none;&quot; src=&quot;./mybroadcast2.mkv&quot; autoplay=&quot;autoplay&quot; controls=&quot;controls&quot; onended=&quot;javascript:videoover();&quot; onclick=&quot;javascript:screen_stop();&quot; ondblclick=&quot;javascript:double_click();&quot;&gt;您的浏览器暂不支持播放该视频，请升级至最新版浏览器。&lt;/video&gt;
&lt;button id=&quot;hary_run&quot; style=&quot;width:100px; height:35px; cursor:pointer;&quot; onclick=&quot;javascript:controlTV(&#39;hary_run&#39;);&quot;&gt;快进&lt;/button&gt;
&lt;button id=&quot;stop_run&quot; style=&quot;width:100px; height:35px; cursor:pointer;&quot; onclick=&quot;javascript:controlTV(&#39;stop_run&#39;);&quot;&gt;暂停&lt;/button&gt;
&lt;button id=&quot;current_run&quot; style=&quot;width:100px; height:35px; cursor:pointer;&quot; disabled=true onclick=&quot;javascript:controlTV(&#39;current_run&#39;);&quot;&gt;播放&lt;/button&gt;
&lt;button id=&quot;open_voice&quot; style=&quot;width:100px; height:35px; cursor:pointer;&quot; onclick=&quot;javascript:controlTV(&#39;open_voice&#39;);&quot;&gt;静音&lt;/button&gt;
&lt;button id=&quot;close_voice&quot; style=&quot;width:100px; height:35px; cursor:pointer;&quot; disabled=true onclick=&quot;javascript:controlTV(&#39;close_voice&#39;);&quot;&gt;取消静音&lt;/button&gt;
&lt;/body&gt;
&lt;script&gt;
function playvideo(type){
var openvideo = document.getElementById(&quot;video&quot;);
if (type == 1){
openvideo.style.display = &quot;block&quot;;
} else if (type == 2){
openvideo.style.display = &quot;none&quot;;
}
}
// 让视频循环列表播放
function videoover(){
var videoId = document.getElementById(&quot;video&quot;);
var video_path = videoId.src;
var path_begin = video_path.substring(0, video_path.lastIndexOf(&quot;.&quot;)-1);
var path_end = video_path.substring(video_path.lastIndexOf(&quot;.&quot;));
var num = parseInt(video_path.charAt(video_path.lastIndexOf(&quot;.&quot;)-1));
if (num &gt;= 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(&quot;video&quot;);
if (&quot;快进&quot; == btn_value){
// 获取当前播放进度
var current_pro = videoId.currentTime;
videoId.currentTime = current_pro + 10;
} else if (&quot;暂停&quot; == btn_value) {
videoId.pause();
runId.disabled = true;
var broad_btn = document.getElementById(&quot;current_run&quot;);
broad_btn.disabled = false;
} else if (&quot;播放&quot; == btn_value) {
videoId.play();
runId.disabled = true;
var stop_btn = document.getElementById(&quot;stop_run&quot;);
stop_btn.disabled = false;
} else if (&quot;静音&quot; == btn_value) {
videoId.muted = true;
runId.disabled = true;
btn_disabled = document.getElementById(&quot;close_voice&quot;);
btn_disabled.disabled = false;
} else if (&quot;取消静音&quot; == btn_value) {
videoId.muted = false;
runId.disabled = true;
var btn_disabled = document.getElementById(&quot;open_voice&quot;);
btn_disabled.disabled = false;
}
}
function screen_stop(){
// 获取媒体播放Id
var videoId = document.getElementById(&quot;video&quot;);
// 判断是否已暂停
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(&quot;video&quot;);
var file = new ActiveXObject(&quot;Scripting.FileSystemObject&quot;);
var inputStream = file.OpenTextFile(&quot;customvideo.properties&quot;);
var content = &quot;&quot;;
while(!inputStream.atEndOfLine){
content + inputStream.readLine + &quot;\n&quot;;
}
inputStream.close();
}
window.onload = onload_property;**/
&lt;/script&gt;
&lt;/html&gt;

登入後複製

【相關推薦】

#1.

H5 video標籤只能放聲音不能放影片的解決方法

#2.

IIS的MIME未註冊MP4類型，導致無法識別vidoe標籤的解決方案

分享HTML5製作Banner的實例

概述HTML5的強大與未來發展

最新的h5標籤datalis的使用方法介紹

以上是詳解html5的video標籤測試應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn