Introduction détaillée à la lecture vidéo HTML5-Tutoriel H5-php.cn

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

零下一度

Libérer： 2017-07-23 13:49:34

original

2548 Les gens l'ont consulté

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

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


<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