Detaillierte Einführung in die HTML5-Videowiedergabe

Kürzlich habe ich PhoneGap verwendet, um eine App zu entwickeln, die ich direkt mit HTML5-Videos abspielen wollte, aber sie unterstützt keine horizontale Bildschirmwiedergabe bei der Wiedergabe im Vollbildmodus. also musste ich aufgeben. Am Ende habe ich beschlossen, einen Player selbst zu paketieren, um mir in Zukunft die Mühe zu ersparen, Funktionen zu erweitern.

Vor kurzem war ich von dem Wort „Hallo“ besessen, also habe ich diesen Player „hivideo“ genannt.

Hivideo ist ein auf HTML5 basierender Videoplayer, der den ursprünglichen Stil der Wiedergabesteuerleiste von Videos aufgibt und ihn selbst neu schreibt. Unterstützt Pause, Wiedergabefortschrittskontrolle, Tonsteuerung und Vollbildwiedergabe. Wenn Sie Hivideo auf einem Mobiltelefon nutzen möchten, unterstützt es auch die horizontale Bildschirmwiedergabe während der Vollbildwiedergabe.

jPlayer: HTML5/Flash-basierter Audio- und Videoplayer

jPlayer ist vollständig in JavaScript geschrieben Kostenlos und Open Source ( MIT )s jQuery-Multimedia-Bibliotheks-Plug-in (jetzt auch ein Zepto-Plug-in);

jPlayer ermöglicht Ihnen das schnelle Schreiben einer plattformübergreifenden Webseite, die Audio- und Videowiedergabe unterstützt.

Mit der umfangreichen API von jPlayer können Sie eine personalisierte Multimedia-Anwendung erstellen, die von immer mehr Community-Mitgliedern unterstützt und ermutigt wird.

Offizielle Website: www.jplayer.cn

Englisch: www.jplayer.org

1. Bereiten Sie

jquery vor. min.js, jquery.jplayer.min.js, jquery.jplayer.swf (offizieller Website-Download)

Es gibt auch eine Audiodatei

2 🎜>

<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>

Anhang: Audio unterstützt von HTML5 Datei

Dateiformat Medientyp

MP3　Audio/mpeg

Ogg　Audio/ogg
Wav　Audio/WAV

Jeder Browser hat seine eigene Unterstützung Anders

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die HTML5-Videowiedergabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!