Maison > Article > interface Web > Exemple de didacticiel de lecture vidéo HTML5

Exemple de didacticiel de lecture vidéo HTML5

零下一度original: 2017-07-16 15:35:302380parcourir

Le côté PC utilise principalement la lecture flash, tandis que le côté mobile utilise HTML5. Cet article présente principalement les informations pertinentes sur la lecture vidéo HTML5, qui a une certaine valeur de référence.

Je me souviens qu'il y a quelques mois, il y avait une nouvelle disant que YouTube prenait en charge les vidéos HTML5 intégrant des balises vidéo. Eh bien, je viens d'en entendre parler, car je ne suis pas une personne douée pour contourner le pare-feu. .Comment puis-je inconnu.

Je ne dirai pas grand-chose sur les choses HTML5 qui ne sont pas liées au thème. Tout le monde a entendu parler de la balise vidéo. La fonction de cette balise est la même que la balise img dans le HTML actuel. langue

1.Avantages techniques du html5

1 Concernant la lecture vidéo sans plug-ins, il suffit de cliquer pour regarder
2 Cross- plate-forme, facile à mettre à niveau et à entretenir, le coût de développement est bien inférieur à celui de l'application native
3. Bon support pour le mobile, prise en charge des gestes, stockage local et 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

La version PC utilise toujours Flash. pour jouer, mais le terminal mobile utilise html5 pour le faire.
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 principaux navigateurs prennent en charge html5 (sauf Opera)
H.264 occupe 80 % du marché 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.

À l'ère du HTML5, vous n'avez besoin que d'une balise 39000f942b2545a5315c57fa3276f220 plus l'adresse du lien src de la vidéo pour lire la vidéo, ce qui est vraiment "cool" pour les développeurs (dans le classique "The Myth" lignes).

Cependant, lorsque la réalité entre en jeu, nous devons y faire face. Désormais, très peu de navigateurs prennent en charge la balise vidéo HTML5. Je sais que Chrome2 et Safari sont pris en charge

3. Code 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction aux formulaires h5 et exemples de problèmes d'échec de validation de formulaireArticle suivant：Introduction aux formulaires h5 et exemples de problèmes d'échec de validation de formulaire

Articles Liés

Voir plus