1

私はライトボックスを構築しており、フラッシュとビデオのサポートを追加しています。ビデオに対する要求や必要性はまったくないので、正直なところ、どこから始めればよいかわかりません。さまざまなブラウザーにさまざまなビデオ形式を提供できる必要があることは知っていますが、これにアプローチする方法がわかりません。また、「最新ではない」ブラウザーでもこれが機能することを望んでいます。私が見つけたチュートリアルと質問は非常に曖昧で、通常は「このプラグインを使ってみてください」という結果になります。おそらく、ブラウザと互換性のあるビデオをロードする方法と、サポートする必要があるビデオ形式を説明することで、誰かが助けてくれるでしょうか? またはリンク:)ありがとう！

4

1 に答える 1

3

私はちょうど同じことをしました。FancyboxとVideo for Everyone を組み合わせて使用​​しました。

基本的に、Video for Everyone の背後にある考え方は、videoHTML5 ビデオをサポートしていないブラウザ用の Flash ビデオ プレーヤーが埋め込まれた HTML5 タグを使用することです。組み込みのフラッシュ プレーヤーには、JWPlayerを使用しました。

そして、次のようなものを<a href="#videoPlayer" class="video_link">Play Video</a>作成して、Fancybox をリンクに向けるだけです。ほら、Fancybox (Lightbox とほぼ同じ) にビデオがあります。

ブラウザ間の互換性のために、MP4 (H.264 コーデックを使用) および WebM または Ogg でファイルを提供する必要があります。HTML5 ビデオをサポートしていない古いブラウザは、とにかく MP4 ファイルで Flash Player のフォールバックを使用します。

MP4 ファイルで注意すべきことの 1 つは、多くの場合、moov アトムがファイルの最後に配置されるため、完全にダウンロードされるまでファイルの再生を開始できないことです。qt-faststartなどのツールを使用してファイルの先頭に移動し、完全にダウンロードする前に再生を開始できるようにします。

例：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("a.video_link").fancybox();
        });
    </script>
</head>
<body>
    <a href="#videoPlayer" class="video_link">Play video</a>
    <video width="640" height="360" controls id="videoPlayer">
        <source src="__VIDEO__.MP4" type="video/mp4" />
        <source src="__VIDEO__.OGV" type="video/ogg" />
        <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
            <param name="movie" value="__FLASH__.SWF" />
            <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
            <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
        </object>
    </video>
</body>
</html>
于 2012-08-24T19:24:31.820 に答える