Блог

Главная - Вопросы по программированию - Чего мне не хватает, чтобы заставить этот простой видеоплеер jquery работать?

Чего мне не хватает, чтобы заставить этот простой видеоплеер jquery работать?

#jquery

#jquery

Вопрос:

У меня есть 2 видео, которые я показываю на странице. Onload , оба видео скрыты, и отображается просто плакат. При нажатии одной из кнопок воспроизводится видео. Какое видео определяется некоторыми вложенными (скрытыми) данными в кнопке.

Я храню свои видео в переменной следующим образом:

 var video_1 = '<video width="840" height="472" controls autoplay class="video_1">'  
   '<source src="/mov/video1.mp4"  type="video/mp4"  />'   
   '<source src="/mov/video1.webm" type="video/webm" /></video>';

var video_2 = '<video width="840" height="472" controls autoplay class="video_2">'  
    '<source src="/mov/video2.mp4"  type="video/mp4"  />'  
    '<source src="/mov/video2.webm" type="video/webm" /></video>';

И мой jquery для этого выглядит так:

 $('#video_selection_wrap .play_wrap').live('click',function(){
    // get the nested data from the button
    var video = $(this).children('.data').text();

    // hide the poster
    $('.poster').fadeOut(function(){
        $('#main-movie').empty();
        switch(video) {
            case 'video_1':
                video_play = video_1;
            break;
            case 'video_2':
                video_play = video_2;
            break;
        }

        // load the appropriate video_play into the movie box
        $('#main-movie').html(video_play).show();
    });
});

Приведенный выше код отлично подходит для первого видео, которое я нажимаю. Однако я надеялся, что если я нажму на другую кнопку, это приведет к опустошению контейнера фильма и загрузке другого видео — это не так.

Вы видите проблему?

Я думаю, это как-то связано с «скрыть плакат». Поскольку он скрыт в первый раз, во второй раз этого не fadeOut происходит, и поэтому он не выполняет какой-либо код в своей функции. Так ли это работает?

Редактировать: вот рабочий jsfiddle проблемы http://jsfiddle.net/RrC2u /

Комментарии:

1. Ваши var video_# переменные объявляются без закрытия переменной и перехода к следующей строке, чего вы не можете сделать в Javascript. (См jsfiddle.net/mZneB , где в консоли Firefox / Chrome вы не увидите ошибок.)

2. Ах .. черт возьми, извините — на самом деле я поместил эти пробелы здесь только для удобства чтения, и в моем коде все это в одной строке. Мне было интересно, как сделать то, что вы сделали, чтобы я мог сделать код более читаемым.

3. Хорошо, полезно знать. Обратите внимание, вы пропустили ' в конце первой строки и во второй строке для каждого … ;) . Спасибо за попытку отформатировать ваш код для удобства чтения, это действительно помогает. :)

4. Теперь я решил проблему jsfiddle.net/RrC2u

5.Вам нужно сделать пути в VIDEO SOURCE тегах абсолютными, а не относительными.

Ответ №1:

Проблема в том, что ваш <div id="main-movie"> элемент неправильно закрыт:

 <div id="movie-selection-wrap">
    <div id="main-movie">        <!-- not closed -->
    <div class="poster"></div>
</div>

Его закрытие устраняет вашу проблему:

 <div id="movie-selection-wrap">
    <div id="main-movie"></div>
    <div class="poster"></div>
</div>

Обновленная скрипка здесь.