Introduction détaillée à la lecture vidéo HTML5

J'ai récemment utilisé PhoneGap pour développer une application. L'application doit lire des vidéos. Je voulais utiliser la vidéo html5 directement, mais elle ne prend pas en charge la lecture sur écran horizontal lors de la lecture en plein écran, donc. J'ai dû abandonner. En fin de compte, j'ai décidé de packager un lecteur moi-même pour éviter d'avoir à étendre les fonctions à l'avenir.

Récemment, je suis devenu obsédé par le mot salut, alors j'ai nommé ce lecteur : hivideo.

Hivideo est un lecteur vidéo basé sur HTML5. Il abandonne le style original de la barre de contrôle de lecture de la vidéo et le réécrit tout seul. Prend en charge la pause, le contrôle de la progression de la lecture, le contrôle du son et la lecture plein écran. Si vous souhaitez utiliser HiVideo sur un téléphone mobile, il prend également en charge la lecture sur écran horizontal pendant la lecture en plein écran.

jPlayer : Un lecteur audio et vidéo basé sur HTML5/Flash

jPlayer est entièrement écrit en JavaScript Gratuit et open source ( le plug-in de bibliothèque multimédia jQuery du MIT (maintenant également un plug-in Zepto)

jPlayer vous permet d'écrire rapidement une page Web multiplateforme prenant en charge la lecture audio et vidéo ; .

La riche API de jPlayer vous permet de créer une application multimédia personnalisée, elle a donc gagné le soutien et les encouragements de plus en plus de membres de la communauté.

Site officiel : www.jplayer.cn

Anglais : www.jplayer.org

1. Préparez

jquery. min .js, jquery.jplayer.min.js, jquery.jplayer.swf (téléchargement du site officiel)

Il y a aussi un fichier audio

Code

<meta>
<title>清冽叮咚短信音</title>


<div>
    <div></div>
    <div>
        <div>
            <div>
                <ul>
                    <li><a>play</a></li>
                    <li><a>pause</a></li>
                    <li><a>stop</a></li>
                    <li><a>mute</a></li>
                    <li><a>unmute</a></li>
                    <li><a>max volume</a></li>
                </ul>
                <div>
                    <div>
                        <div></div>
                    </div>
                </div>
                <div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script></script>
<script></script>
<script>    
    function toplay(){ 
        var playerc = $("#jquery_jplayer_1"); 
        if (playerc.data().jPlayer && playerc.data().jPlayer.internal.ready === true) {
            playerc.jPlayer("setMedia", {
                m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //使用网络资源，自行设定音频文件
            }).jPlayer("play");//jPlayer("play") 用来自动播放
        }else {
            playerc.jPlayer({
                ready: function() {
                    $(this).jPlayer("setMedia", {
                        m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //同上
                    }).jPlayer("play");//同上
                },
                swfPath: "include/javascript",
                supplied: "m4a"  //acc属于M4A
            });
        }
    }  
    setInterval(function(){
         toplay();
    },3000);//3秒循环播放
</script>

Copier après la connexion

Pièce jointe : Audio pris en charge par HTML5 Fichier

Format de fichier Type de média
MP3　audio/mpeg
Ogg　audio/ogg
Wav　audio/wav

Chaque navigateur a son propre support Différent

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!