HTML5影片播放的詳細介紹

最近一段時間在使用PhoneGap開發一個App應用，App需要播放視頻，本想直接使用html5的video，但使用它在全屏播放時不支持橫屏播放，只能放棄。最後決定還是自己封裝一個播放器算了，免得以後要擴充功能麻煩。

    最近迷上hi這個單字，所以我給這個播放器取名叫做：hivideo。

    hivideo是一款基於html5的視訊播放器，摒棄video原有的播放控制條樣式，自己重寫了一次。支援暫停、播放進度控制、聲音控制、全螢幕播放。如果是要在手機端使用hivideo，全螢幕播放時也支援橫螢幕播放。

jPlayer : 基於HTML5/Flash的音訊、視訊播放器

jPlayer是一個JavaScript寫的完全免費和開源 ( MIT) 的jQuery多媒體庫插件(現在也是一個Zepto插件);

jPlayer可以讓你迅速編寫一個跨平台的支援音訊和視訊播放的網頁.

jPlayer的豐富API可以讓你創造一個個人化多媒體應用，因此也獲得越來越多的社群成員的支持與鼓勵。

官網:www.jplayer.cn

英文：www.jplayer.org

1.準備

jquery.min .js、jquery.jplayer.min.js、jquery.jplayer.swf （官網下載）

還有一個音訊檔案

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>

###################附：HTML5支援的音訊檔案# ########檔案格式 媒體類型###MP3　　audio/mpeg###Ogg　　audio/ogg###Wav　　audio/wav#######各個瀏覽器的支援各有有所不同## ##

以上是HTML5影片播放的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！