Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Einführung in die HTML5-Videowiedergabe

Detaillierte Einführung in die HTML5-Videowiedergabe

零下一度
零下一度Original
2017-07-23 13:49:342600Durchsuche

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

Detaillierte Einführung in die HTML5-Videowiedergabe

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

Detaillierte Einführung in die HTML5-Videowiedergabe
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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn