Question

我想知道如何使用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>

Answer 1

为了简单起见，我根据Katana314的评论编辑了我的答案。我想这就是你要找的东西。您错过了视频标记内的视频src（您还可以使用嵌套在视频标记内的源标记定义多个源视频编码）。

您尝试在视频标记中附加对象标记的方式并不完全正确，因此您只需要这样做，否则您就在正确的轨道上。

我目前没有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>

Answer 2

我也在寻找类似的解决方案，遗憾的是，我还没有找到<object>可以直接与<video>集成的示例。有一个简单的方法来获得<object>，详情如下。我想的可能是canplaythrough并且在错误时回退到这个QT插件。

您可以使用Safari Developer网站上的QT插件。

获取plugin
用作外部脚本：<script src="ac_quicktime.js"></script>

将以下脚本块放在要嵌入视频的位置：

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

无论您希望QuickTime内容出现在您的网页中，请放置一行调用函数QT_WriteOBJECT( )的JavaScript，传递QuickTime内容的URL，显示区域的宽度和高度，首选ActiveX版本（通常留空）和任何可选的QuickTime属性。

...

在运行时，这将生成正确的标记并将其插入您的网页。此示例将URL http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4（QuickTime影片的文件名）传递到与网页相同的目录中。分配的宽度为640像素，分配的高度为360像素。 ActiveX版本留空，因此默认为最新版本。

如何使用jquery或javascript动态地将对象标签添加到html5视频标签

2 个答案: