HTML5 비디오 태그 테스트 애플리케이션에 대한 자세한 설명-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 비디오 태그 테스트 애플리케이션에 대한 자세한 설명

零下一度

May 19, 2017 pm 04:50 PM

1. 비디오 태그 사용

속성: src(재생할 오디오 파일 경로), autoplay(자동 재생 여부), control(진행 표시줄), loop(루프 재생) ), onended(재생 완료가 이벤트인지 여부)

2. 간단한 플레이어를 구현했습니다

인터페이스는 다음과 같습니다.

함수는 주로 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(&#39;hary_run&#39;);">快进</button>
<button id="stop_run" style="width:100px; height:35px; cursor:pointer;" onclick="javascript:controlTV(&#39;stop_run&#39;);">暂停</button>
<button id="current_run" style="width:100px; height:35px; cursor:pointer;" disabled=true onclick="javascript:controlTV(&#39;current_run&#39;);">播放</button>
<button id="open_voice" style="width:100px; height:35px; cursor:pointer;" onclick="javascript:controlTV(&#39;open_voice&#39;);">静音</button>
<button id="close_voice" style="width:100px; height:35px; cursor:pointer;" disabled=true onclick="javascript:controlTV(&#39;close_voice&#39;);">取消静音</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>

로그인 후 복사

2. IIS의 MIME은 MP4 유형을 등록하지 않아 동영상 태그를 인식할 수 없는 문제가 해결되었습니다

3. HTML5를 사용한 배너 제작 사례 공유

4. HTML5의 성능 및 향후 개발 개요

5 . 최신 h5 태그 datalis 사용법 소개

위 내용은 HTML5 비디오 태그 테스트 애플리케이션에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.