1

jqueryまたはjavascriptを使用して、オブジェクトタグをhtml5ビデオタグに追加する方法を知りたい

jqueryで試してみましたがうまくいきませんでした（IE8以下のブラウザでは動画が見れません）

以下は私のコードです

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var configval= "config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}";

            var $source = $('<object type="application/x-shockwave-flash" width="640" height="360">'+
                            '<param name="movie" value="http://api.html5media.info/1.1.5/flowplayer.swf" />'+
                            '<param name="flashVars" value="1" />'+
                            '</object>'+
                            '<p>need to install quick time player to play videos</p>');
            $source.find('param[name="flashVars"]').attr('value', configval);
            var $video = $('<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360"></video>').append($source);

            $('body').append($video);
        })
    </script>
4

2 に答える 2

1

Katana314 のコメントに基づいて、簡単にするために回答を編集しました。これがあなたが探しているものだと思います。ビデオ タグ内にビデオ src がありませんでした (ビデオ タグ内にネストされたソース タグを使用して、複数のソース ビデオ エンコーディングを定義することもできます)。

object タグを video タグ内に追加しようとしていた方法が正しくなかったため、それを行う必要があります。それ以外の場合は、正しい軌道に乗っていました。

現時点でテストするIE8はありませんが、これはうまくいくはずです：

<script type="text/javascript">
    $(document).ready(function(){
        var configval= "config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}";

        var $source = $('<object type="application/x-shockwave-flash" width="640" height="360">'+
                        '<param name="movie" value="http://api.html5media.info/1.1.5/flowplayer.swf" />'+
                        '<param name="flashVars" value="1" />'+
                        '</object>'+
                        '<p>need to install quick time player to play videos</p>');
        $source.find('param[name="flashVars"]').attr('value', configval);

        //Added source of your video here
        var $video = $('<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360"></video>');

        $('body').append($video);

        //append source inside of the video tag
        $('video').append($source);
    })
</script>
于 2013-07-25T15:09:19.380 に答える
0

私も同様の解決策を探していますが、残念ながら、<object>直接統合できる例をまだ見つけていません<video>。<object>詳細を以下に簡単に取得する方法があります。私はおそらくcanplaythroughこのQTプラグインへのフォールバックを考えていました。

サイトから QT プラグインを使用できますSafari Developer。

  1. を入手plugin

  2. 外部スクリプトとして使用:<script src="ac_quicktime.js"></script>

  3. ビデオを埋め込みたい場所に次のスクリプト ブロックを配置します。

    <script>
QT_WriteOBJECT('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', '640', '360', '');
</script>

Web ページのどこにでも QuickTime コンテンツを表示したい場合は、関数を呼び出す JavaScript の行を配置しQT_WriteOBJECT( )、QuickTime コンテンツの URL、表示領域の幅と高さ、優先する ActiveX バージョン (通常は空白のまま)、および任意のオプションを渡します。 QuickTime 属性。

...

これにより、実行時に正しいタグが生成され、Web ページに挿入されます。この例では、Web ページと同じディレクトリにある QuickTime ムービーのファイル名であるURL http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4を渡します。割り当てられた幅は 640 ピクセル、割り当てられた高さは 360 ピクセルです。ActiveX のバージョンは空白のままなので、デフォルトで最新のバージョンになります。

于 2016-03-11T05:33:50.707 に答える