JQueryを使用して、FlowPlayerを使用して映画を埋め込みます

このガイドは、オープンソースのフロープレーヤーを使用して映画を埋め込む方法を示しています。 この最小限のセットアップにより、開始できます。将来の投稿では、iPadサポート、カスタムコントロール、ライブストリーミングなどの高度なカスタマイズをカバーします。

html

<code class="language-html"><div id="fms"></div>
<div id="video-stream-status"><span class="status">Status Ready.</span></div></code>

jQuery

<code class="language-javascript">//video or stream address
var streamAddressFull = "http://streamaddress/mp4:filename/playlist.m3u8",
    vidElem = $('#fms'),
    statusElem = $('#video-stream-status .status');

$f('fms', "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
    debug: true, //output all events to the console for debugging

    onError: function(e) {
        statusElem.html("Error: (code:" + e + ").");
    },

    version: [9, 115], //minimum Flash version required

    onFail: function() {
        statusElem.html("Update Flash for MP4 playback. Your version: " + this.getVersion());
    },

    onBeforeLoad: function() {
        statusElem.html("Loading...");
    },

    clip: {
        url: streamAddressFull,
        scaling: 'fit', //fit, scale, orig, half
        autoPlay: true,
        autoBuffering: true,
        onStart: function(clip) {
            statusElem.html("Playing.");
        }
    },

    plugins: {
        controls: {
            right: 0,
            bottom: 0,
            opacity: 0.95,
            backgroundGradient: 'low',
        }
    },

    canvas: {
        backgroundGradient: 'none',
        backgroundColor: '#000000'
    }
});</code>

よくある質問（FAQ）：

• のインストール：FlowPlayerスクリプトとCSSファイルを公式Webサイトからダウンロードし、HTMLに含めます。 FlowPlayerを初期化関数を使用して、ターゲット要素IDと構成オプションを指定します。 $f()

• jQueryの互換性：

  はい、FlowPlayerはjQueryでシームレスに動作し、高度なコントロールとインタラクティブ性を可能にします。

カスタマイズ：
• CSSとその構成オプションを使用してフロープレーヤーの外観をカスタマイズして、サイズ、色、動作を変更します。
  ビデオソース：
FlowPlayerは、サーバー、CDN、ビデオホスティングサービスなど、さまざまなビデオソースをサポートしています。 初期化中にビデオURLを提供します

• 再生コントロール：

• ブラウザ互換性：FlowPlayerは、HTML5ビデオを使用して最新のブラウザと互換性があります。 古いブラウザにはフラッシュプラグインが必要になる場合があります（コードの例に示されているように）。

• モバイルサポート：

  FlowPlayerは応答性が高く、タッチコントロールを備えたモバイルデバイスで動作します。

複数のインスタンス：
• 単一ページに複数のフロープレーヤーインスタンスを埋め込むことができます。 それぞれに一意のIDが必要です。

ライブストリーミング：
• フロープレーヤーはライブストリームをサポートしています。初期化中にストリームURLを提供します
  トラブルシューティング：
ブラウザのJavaScriptコンソールのエラーメッセージの確認を確認してください。 支援については、FlowPlayerのドキュメントとコミュニティフォーラムを参照してください

以上がJQueryを使用して、FlowPlayerを使用して映画を埋め込みますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。