Question

我正在尝试根据click事件交换此embed元素的src值的值它可以在firefox和opera中使用，但不适用于safari，chrome或IE。

$('.scrollableArea a').click(function() {
//retract id from selected anchor, and create + append new video parameter values.
var newVideoVal = 'http://www.youtube.com/v/' + $(this).attr("id") + '?version=3&autoplay=1';
$('#gallery_content object param').attr('value', newVideoVal);
$('#gallery_content object embed').attr('src', newVideoVal);
});

如果我 console.log 点击事件功能中的以下内容..

console.log($('#gallery_content embed').attr("src"));

对于每个点击事件，控制台返回src的值，具有交替的锚点id值，例如。
http://www.youtube.com/v/videoidhere?version=3&autoplay=1

-

这是浏览器问题吗？操纵object / embed元素的问题？
难道我做错了什么？（可能！）

Answer 1

您可能正在覆盖您不想要的param元素：

$('#gallery_content object param[name="movie"]').attr(...);

可能会帮到你。嵌入元素在IE中不起作用，可能还有webkit（我永远不会记得哪些在哪里工作）。我建议使用satay flash嵌入方法。这是DRY呃

Answer 2

如前所述，试图设置所有参数而不是名称为“电影”的参数。

话虽这么说，我不相信你可以像“在飞行中”那样改变视频。我建议制作另一个页面，比如display_video.php或者其他什么。写一些php来生成youtube嵌入代码。如：

<?php if(isset($_POST['video_id'])) { ?>

    <object style="height: 390px; width: 640px">

        <param name="movie" value="http://www.youtube.com/v/<?=$_POST['video_id']?>?version=3">
        <param name="allowFullScreen" value="true">
        <param name="allowScriptAccess" value="always">

        <embed src="http://www.youtube.com/v/<?=$_POST['video_id']?>?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390">

    </object>

<? } ?>

然后，使用jquery的$.ajax()方法来更新它。像这样：

$(document).ready(function() {

    $('.scrollableArea a').click(function() {

        var video_id = this.id // same thing as $(this).attr('id')

        $.ajax({
            type: "POST",
            url: "display_video.php",
            data: "video_id=" + video_id,
            success: function(html){
                $('#gallery_content').html(html);
            }
        });

    });

});

您可能需要对此进行一些修改，因为我对您正在做的事情并不十分了解。希望这有帮助！

修改

此外，如果.scrollableArea中有大量标记，您可能需要考虑事件委派。它会加速你的JavaScript。它看起来像这样：

$(document).ready(function() { $('.scrollableArea').click(function(e) { // get tagname of the element that was clicked var element_clicked = e.target.tagName; if (element_clicked = 'a') { // now change the video var video_id = this.id // same thing as $(this).attr('id') $.ajax({ type: "POST", url: "display_video.php", data: "video_id=" + video_id, success: function(html){ $('#gallery_content').html(html); } }); } }); });

事件委派是一种在大量元素上观察事件的有效方法。通过绑定到DOM树的更远点并观察冒泡事件来工作。基本上，您将click事件绑定到DOM中的ONE元素而不是很多。

Answer 3

感谢大家，我已经通过一些组合逻辑解决了我的解决方案，这些逻辑来源于这些建议。

$('.scrollableArea a').click(function() {   
    var newObjElement = '<object style="width:580px;height:386px;"><param name="movie" value="http://www.youtube.com/v/'+this.id+'?version=3&autoplay=1"><embed src="http://www.youtube.com/v/'+this.id+'?version=3&autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="580" height="386"></object>';

    mainArea.html(newObjElement);
});

*留意this.id。

这适用于大多数浏览器，（safari，opera，chrome，firefox，ie8 / 9），ie6和7.除外（尽管不关心ie6）

关于为什么/如何解决ie7问题的任何想法？

干杯！

使用attr（）方法的JQuery对象/嵌入元素问题

3 个答案: