Detailed explanation of HTML5 video tag testing application-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Detailed explanation of HTML5 video tag testing application

May 19, 2017 pm 04:50 PM

1. Use of video tag

Attributes: src (path to the audio file to be played), autoplay (whether to play automatically), control (progress bar), loop (loop playback) ), onended (whether the completion of playback is an event)

2. Implemented a simple player

The interface is as follows:

3. Function

is mainly accomplished through onclick and onended events. Specifically, all the above are implemented, but there are requirements for the naming of audio files. Please see Code

4. Code:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

&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;

Copy after login

[Related recommendations]

1. Solution to the problem that the H5 video tag can only play sound but not video

2. The MIME of IIS does not register the MP4 type, resulting in the solution that the vidoe tag cannot be recognized

3. Share an example of making a banner using HTML5

4. Overview of the power and future development of HTML5

5. Introduction to the use of the latest h5 tag datalis

The above is the detailed content of Detailed explanation of HTML5 video tag testing application. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn