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

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>