Проблема с объектом JQuery / элементом встраивания с методом attr () - PullRequest
1 голос
/ 02 марта 2011

Я пытаюсь обменять значение src этого элемента встраивания, зависящее от события click.
Он работает в 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);
});

Если i console.log , то в функции события щелчка выполните следующее.

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

Консоль возвращает для каждого события щелчка - значениеsrc, со значением идентификатора чередующихся якорей, например.
http://www.youtube.com/v/videoidhere?version=3&autoplay=1

-

Это проблема браузера?
Проблема с манипулированием элементом object / embed?
Я делаю что-то неправильно?(Возможно!)

Ответы [ 3 ]

0 голосов
/ 03 марта 2011

Как уже говорилось, вы пытаетесь установить все параметры вместо параметра с именем = "фильм".

Как говорится, я не верю, что вы можете менять видео "на лету". Я бы порекомендовал сделать еще одну страницу, скажем, 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);
            }
        });

    });

});

Возможно, вам придется немного изменить это, так как я мало что знаю о том, что вы делаете. Надеюсь, это поможет!

EDIT

Кроме того, вы можете рассмотреть делегирование событий, если у вас есть большое количество тегов в вашей .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, а не со многими.

0 голосов
/ 09 марта 2011

Спасибо всем, я решил свое решение с помощью немного комбинированной логики, основанной на этих предложениях.

$('.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?

Ура!

0 голосов
/ 02 марта 2011

Возможно, вы переопределяете элемент param, который вы не собираетесь:

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

может помочь тебе. Элементы встраивания не работают в IE, и, возможно, webkit (я никогда не могу вспомнить, где и где работает). Я бы предложил использовать метод флэш-встраивания satay . Это СУХОЙ ЭР

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...