집 > 기사 > 웹 프론트엔드 > HTML5 비디오 재생 튜토리얼

HTML5 비디오 재생 튜토리얼

小云云원래의: 2017-11-28 09:51:254722검색

개발 환경에서는 비디오 재생이 자주 발생합니다. 이 기사에서는 html5 비디오 재생 솔루션을 공유하겠습니다. 이 장을 공부한 후에는 html5에 대한 더 나은 지식을 갖고 html5를 사용하여 비디오를 작성할 수도 있습니다. . 재생 기능.

우리 모두 알고 있듯이 애플리케이션 개발에는 두 가지 유형이 있습니다. 하나는 기본 앱이고 다른 하나는 브라우저를 통해 액세스하는 애플리케이션인 웹 앱입니다.
html5는 모바일 인터넷 시대에 고유한 위치를 차지합니다. 많은 장점이 있지만 네이티브 APP의 개발 비용이 높지만 좋은 사용자 경험, API 및 기존 개발 생태계 등을 갖추고 있습니다. ., 두 APP는 서로를 보완하고 공존할 것입니다. HTML5를 배우는 비용은 높지 않습니다. H5의 본질은 HTML입니다. 웹 개발을 해본 프로그래머라면 조금만 공부하면 마스터할 수 있습니다.

여기서의 주요 연구는 html5를 적용하여 동영상 재생 문제를 해결하는 것입니다. Adobe는 전략적 실수로 인해 모바일 인터넷을 방치해 왔습니다. 모바일 단말기는 플래시를 잘 지원하지 않으며, 특히 Apple 단말기는 플래시를 지원하지 않습니다(Apple 컴퓨터와 노트북은 플래시를 지원합니다). PC의 대부분의 애플리케이션은 플래시를 사용하며
스트리밍 미디어는 좋은 대화형 경험을 제공할 수 있습니다. 모바일 기기에서 동영상을 재생하고 표시하기 위해 HTML5에 대해 심도있게 연구했으며, HTML5를 사용하여 플러그인 없이 바로 동영상을 재생할 수 있으며, 플랫폼에 상관없이 재생할 수도 있습니다.

1. html5의 기술적 장점
1 플러그인 없이 동영상 재생을 클릭하면 볼 수 있습니다.
2 크로스 플랫폼, 업그레이드가 쉽고 유지 관리가 쉽고 개발 비용이 기본 앱보다 훨씬 저렴합니다. 모바일 지원, 제스처 지원, 로컬 저장 및 비디오 연속성 등이 뛰어나 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를 의미합니다.

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><div id="a">
<p>这是安卓手机</p></div><div id="b"><p>这是苹果手机</p>
</div><div id="c"><p>这是ipad</p></div><div id="d">
<p>这是电脑</p></div><div style="width:700px;margin:auto;"> 
<!--播放器代码开始--> <div class="playContent"> <div class="playScreen">
 <video id="myVideo"> <source src="Movie/th264.mp4" type="video/mp4"> 
</video> </div> <div class="proLines"> <div id="origin" class="arial">00:00:00</div>
 <div class="line"> <div class="isPlayLine"> <div class="currentCircle"> </div>
 </div> </div> <div id="duration" class="arial"></div> </div> <div class="playBars">
 <div class="prevBar"><img  src="Images/prev.jpg" border="0" id="prev" alt="HTML5 비디오 재생 튜토리얼" ></div> 
<div class="startBar"><img  src="Images/stop.jpg" border="0" id="imgStatus" alt="HTML5 비디오 재생 튜토리얼" ></div>
 <div class="nextBar"><img  src="Images/next.jpg" border="0" id="next" alt="HTML5 비디오 재생 튜토리얼" ></div>
 <div class="voiceContent"> <div class="voice"> <img  src="Images/voice.jpg" id="voiceImg" border="0" alt="HTML5 비디오 재생 튜토리얼" > </div> 
<div class="voiceline"> <div class="voicekuai">
</div> </div> </div> </div> </div>
 <!--播放器代码结束--></div> 
</body>
 </html>

4. HTML5 개발

Html5 브라우저 지원
대부분의 브라우저는 html5를 지원합니다(오페라 미니 제외)

HTML5 비디오 재생 튜토리얼

데이터 출처: http://caniuse.com/ #cats=HTML5

mp4 비디오 지원
메인스트림 지원 mp4(오페라 제외)

HTML5 비디오 재생 튜토리얼

데이터 출처:

http://caniuse.com/#feat=video

위 내용은 html5 비디오 재생 솔루션에 대한 내용입니다. 모두에게 도움이 되기를 바랍니다.

HTML5 비디오 재생 튜토리얼

관련 기사