HTML5ビデオ再生の詳細な紹介

最近、PhoneGap を使用してアプリを開発しています。アプリでは HTML5 ビデオを直接使用したかったのですが、全画面での再生時に横画面再生がサポートされていないため、諦めなければなりませんでした。 。結局、将来の機能拡張の手間を避けるために、プレーヤーを自分でパッケージ化することにしました。

最近、「こんにちは」という言葉に夢中になっているので、このプレーヤーに「hivideo」という名前を付けました。

Hivideo は、HTML5 に基づいたビデオ プレーヤーであり、ビデオの本来の再生コントロール バー スタイルを放棄し、独自に書き換えます。一時停止、再生進行制御、サウンド制御、全画面再生をサポートします。携帯電話で HiVideo を使用する場合は、全画面再生時の横画面再生にも対応します。

jPlayer: HTML5/Flashベースのオーディオおよびビデオプレーヤー

jPlayerは、JavaScriptで書かれた完全に無料でオープンソース(MIT)のjQueryマルチメディアライブラリプラグイン(現在はZeptoプラグインでもあります)です。

jPlayer オーディオとビデオの再生をサポートする クロスプラットフォーム Web ページをすばやく作成できます。

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>

ファイルフォーマット メディアタイプ

MP3 audio/ mpeg Ogg audio/ogg Wav audio/wav

各ブラウザのサポートは異なります

以上がHTML5ビデオ再生の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。