HTML5 비디오 재생 튜토리얼 예
- 零下一度원래의
- 2017-07-16 15:35:302381검색
PC 쪽은 주로 플래시 재생을 사용하는 반면, 모바일 쪽은 HTML5를 사용하는 반면, 이 글에서는 일정한 참고 가치가 있는 html5 동영상 재생 관련 정보를 주로 소개합니다.
몇 달 전에 YouTube에서 HTML5 동영상 임베딩 태그 동영상을 지원한다는 소식이 있던 것으로 기억합니다. 제가 벽을 잘 피하는 사람이 아니라서 어떻게 하는지는 모르겠습니다. 작동합니다.
테마와 관련되지 않은 HTML5에 대해서는 많이 언급하지 않겠습니다. 모두가 video 태그에 대해 들어봤을 것입니다. 이 태그의 기능은 현재 HTML 언어의 img 태그와 동일합니다
1 .HTML5 기술의 장점
1 동영상의 경우 플러그인이 필요하지 않으며 클릭만으로 시청할 수 있습니다.
2 크로스 플랫폼, 업그레이드가 쉽고 유지 관리가 쉽고 개발 비용이 기본 앱보다 훨씬 저렴합니다
3 모바일 지원, 제스처 지원, 로컬 저장 및 비디오 지속 H5를 통해 웹 사이트를 모바일로 만들 수 있습니다.
4 더 간결해진 코드, 더 나은 상호 작용
5 게임 개발 지원
2. HTML5 비디오 재생
PC 쪽은 여전히 플래시 재생을 사용하지만, 모바일 쪽은 html5를 통해 합니다.
html5의 비디오 태그는 mp4, webm 및 ogg의 세 가지 형식만 지원합니다. 현재 모든 주류 브라우저의 최신 버전은 html5를 지원합니다(Opera 제외).
H.264는 비디오 시장의 80%를 점유하고 있습니다. 모바일 애플리케이션용으로 동영상을 사용하는 경우 압축률이 높고 화질이 좋은 264 형식으로 컴파일하는 것이 좋습니다.
H.264는 두 조직이 공동으로 설립한 JVT(Joint Video Group)가 공동으로 개발한 새로운 디지털 비디오 코딩 표준으로, ITU-T의 H.264와 ISO/IEC의 MPEG-4 고급 비디오 코딩입니다. 코딩, AVC) 10부. 따라서 MPEG-4 AVC, MPEG-4 Part 10, ISO/IEC 14496-10 등 모두 H.264를 참조합니다.
HTML5 시대에는 기본적으로 비디오를 재생하기 위해 39000f942b2545a5315c57fa3276f220 태그와 비디오의 src 링크 주소만 있으면 됩니다. 이는 개발자에게 정말 "멋진" 기능입니다("The Myth"의 고전적인 대사).
그러나 현실이 닥치면 직시해야 합니다. 이제 HTML5 비디오 태그를 지원하는 브라우저는 거의 없습니다. Chrome2와 Safari가 지원되는 것으로 알고 있습니다
3. HTML5 코드 DEMO
<!doctype html>
<html>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script src="JavaScript/jquery-1.7.2.min.js"></script>
<script src="JavaScript/jsPlayer.js"></script>
<script src="JavaScript/dtooltip-min.js"></script>
<link href="CSS/play.css?var=1121" rel="stylesheet" type="text/css">
<script type="text/javascript">
function browserRedirect() {
var sUserAgent= navigator.userAgent.toLowerCase();
var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp= sUserAgent.match(/midp/i) == "midp";
var bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc= sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid= sUserAgent.match(/android/i) == "android";
var bIsCE= sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile";
if(bIsAndroid){
document.getElementById("a").style.display="block";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
document.getElementById("d").style.display="none";
}
else if (bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM) {
document.getElementById("b").style.display="block";
document.getElementById("d").style.display="none";
document.getElementById("a").style.display="none";
document.getElementById("c").style.display="none";
} else if(bIsIpad) {
document.getElementById("c").style.display="block";
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("d").style.display="none";
}
else {
document.getElementById("d").style.display="block";
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
}
}
window.onload=function(){browserRedirect();}
$(document).ready(
function(){
var ps=new jsPlayer("700","500","myVideo");
}
);
</script>
<head>
<title>测试移动终端</title>
</head>
<body>
<p id="a"><p>这是安卓手机</p></p>
<p id="b"><p>这是苹果手机</p></p>
<p id="c"><p>这是ipad</p></p>
<p id="d"><p>这是电脑</p></p>
<p style="width:700px;margin:auto;">
<!--播放器代码开始-->
<p class="playContent">
<p class="playScreen">
<video id="myVideo">
<source src="Movie/th264.mp4" type="video/mp4">
</video>
</p>
<p class="proLines">
<p id="origin" class="arial">00:00:00</p>
<p class="line">
<p class="isPlayLine">
<p class="currentCircle">
</p>
</p>
</p>
<p id="duration" class="arial"></p>
</p>
<p class="playBars">
<p class="prevBar"><img src="Images/prev.jpg" border="0" id="prev"></p>
<p class="startBar"><img src="Images/stop.jpg" border="0" id="imgStatus"></p>
<p class="nextBar"><img src="Images/next.jpg" border="0" id="next"></p>
<p class="voiceContent">
<p class="voice">
<img src="Images/voice.jpg" id="voiceImg" border="0">
</p>
<p class="voiceline">
<p class="voicekuai"></p>
</p>
</p>
</p>
</p>
<!--播放器代码结束-->
</p>
</body>
</html>위 내용은 HTML5 비디오 재생 튜토리얼 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!