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 的评论编辑了我的答案。我想这就是你要找的。您缺少 video 标签内的 video src（您还可以使用嵌套在 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 插件。

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

  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>

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

...

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

于 2016-03-11T05:33:50.707 回答