Tutoriel de lecture vidéo HTML5-Tutoriel H5-php.cn

Tutoriel de lecture vidéo HTML5

小云云

Libérer： 2017-11-28 09:51:25

original

4769 Les gens l'ont consulté

Concernant la lecture vidéo, nous en rencontrons souvent dans le monde du développement. Dans cet article, nous partagerons avec vous la solution de lecture vidéo html5. Nous espérons qu'après avoir étudié ce chapitre, tout le monde aura une meilleure connaissance du html5 et pourra. écrivez également en html5. Quittez la fonction de lecture vidéo.

Comme nous le savons tous, il existe deux types de développement d'applications : l'un est l'application native et l'autre est l'application Web, qui est une application accessible via un navigateur.
html5 a sa place unique à l'ère de l'Internet mobile. Bien qu'il présente de nombreux avantages, il ne peut pas remplacer complètement l'application native. Bien que le coût de développement de l'application native soit élevé, sa bonne expérience utilisateur et son API existent. la chaîne écologique, etc. maintiendra sa prospérité à long terme. Les deux APP se compléteront et coexisteront. Le coût de l'apprentissage du HTML5 n'est pas élevé. L'essence du H5 est le HTML. Les programmeurs qui ont fait du développement Web peuvent le maîtriser avec un peu d'étude.

La recherche principale ici est de résoudre le problème de la lecture vidéo en appliquant html5. Adobe a négligé l'Internet mobile en raison d'erreurs stratégiques. Les terminaux mobiles ne prennent pas bien en charge le flash, en particulier les terminaux Apple ne prennent pas en charge le flash (les ordinateurs et ordinateurs portables Apple prennent en charge le flash). Flash est utilisé dans la plupart des applications côté PC, et
le streaming multimédia peut offrir une bonne expérience interactive. Afin de pouvoir lire et afficher des vidéos sur des appareils mobiles, nous avons étudié et étudié en profondeur HTML5. Nous utilisons HTML5 pour lire des vidéos directement sans plug-ins, et pouvons également réaliser une lecture sur plusieurs plates-formes.

1. Avantages techniques du html5
1 Concernant les vidéos, aucun plug-in n'est requis pour jouer, il suffit de cliquer pour regarder
2 Multiplateforme, facile à mettre à niveau, facile à entretenir, et le le coût de développement est bien inférieur à celui des applications natives
3 Oui Il offre un bon support mobile, prend en charge les gestes, le stockage local et la relecture vidéo, etc. Vous pouvez rendre votre site Web mobile via H5.
4 Code plus concis, meilleure interaction
5 Prise en charge du développement de jeux

2. Lecture vidéo HTML5
Le PC utilise toujours Flash pour jouer, mais le terminal mobile utilise la méthode HTML5 pour le faire. il.
La balise vidéo de html5 ne prend en charge que trois formats : mp4, webm et ogg. Actuellement, les dernières versions de tous les navigateurs grand public prennent en charge html5 (sauf Opera)

H.264 occupe 80 % du format. marché de la vidéo. Si vous utilisez la vidéo pour des applications mobiles, il est recommandé de la compiler au format 264, qui présente un bon taux de compression élevé et une qualité d'image élevée.
H.264 est une nouvelle norme de codage vidéo numérique formulée conjointement par le Joint Video Group (JVT) établi conjointement par deux organisations. Il s'agit à la fois du H.264 de l'ITU-T et du MPEG-4 Advanced Part 10 de l'ISO/IEC. Codage vidéo (AVC). Par conséquent, qu'il s'agisse de MPEG-4 AVC, MPEG-4 Part 10 ou ISO/IEC 14496-10, tout fait référence à H.264.

3. DÉMO du code html5

<!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="Tutoriel de lecture vidéo HTML5" ></div> 
<div class="startBar"><img  src="Images/stop.jpg" border="0" id="imgStatus" alt="Tutoriel de lecture vidéo HTML5" ></div>
 <div class="nextBar"><img  src="Images/next.jpg" border="0" id="next" alt="Tutoriel de lecture vidéo HTML5" ></div>
 <div class="voiceContent"> <div class="voice"> <img  src="Images/voice.jpg" id="voiceImg" border="0" alt="Tutoriel de lecture vidéo HTML5" > </div> 
<div class="voiceline"> <div class="voicekuai">
</div> </div> </div> </div> </div>
 <!--播放器代码结束--></div> 
</body>
 </html>

Copier après la connexion

4. Développement HTML5
Prise en charge du navigateur HTML5
La plupart des navigateurs prennent en charge HTML5 (sauf Opera Mini)

Tutoriel de lecture vidéo HTML5