2013-09-04 4 views
0

Как создать видео-плейлист, который поддерживает встроенные видео?Как создать плейлист с видео YouTube?

Я не хочу, чтобы страница обновлялась, просто видео меняется динамически, если пользователь нажимает на другое видео, взгляните на this для справки.

Включает ли какой-либо из jplayer/video-js/flowplayer и т. Д. Эту функцию?

ответ

0

Если вы используете video.js и плагин YouTube, вы можете обновить источник, используя video.js API. Вам нужно указать тип video/youtube.

videojs("myPlayer").src({ type: "video/youtube", src: "http://www.youtube.com/watch?v=dQw4w9WgXcQ"}); 

Пример: http://jsfiddle.net/mister_ben/g7mrs/

+0

видео не загружается, я смотрел в консоли, чтобы найти «Заблокированный кадр с источником» http://www.youtube.com »от доступа к кадру с источником« http://jsfiddle.net ». Протоколы, домены , и порты должны совпадать. " ошибка. Я думаю, что ваше решение должно работать –

+0

Да, это работает. –

0

Это трюк JS. Если у вас есть консоль в браузере (или firebug), вы можете видеть, что он получает запрос JSON и ответ от браузера на сервер и обратный. Сервер зачитывается из базы данных, правильное встроенное видео, оно отправляется в браузер и вставляется в страницу DOM.

+0

является возможность обойтись без БД? нравится получать URL-адреса из какого-либо другого файла или список, который скрыт css? –

0

Попробуйте этот пример, чтобы динамически изменять YouTube ЦСИ:

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="http://vjs.zencdn.net/5.4.4/video-js.css"/> 
</head> 
<body> 
<video 
    id="vid1" 
    class="video-js vjs-default-skin" 
    controls 
    width="640" height="264" 
    data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }' 
    > 
</video> 


<button id="change">change video</button> 

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="http://vjs.zencdn.net/5.4.4/video.js"></script> 
<script 
    src="https://raw.githubusercontent.com/eXon/videojs-youtube/637a2916c2c4fd2b5fc55dafa3df923a92fec6d0/src/Youtube.js"></script> 
<script> 

    (function ($) { 
     $(document).ready(function() { 

      // An example of playing with the Video.js javascript API 
      // Will start the video and then switch the source 3 seconds latter 
      // You can look at the doc there: http://docs.videojs.com/docs/guides/api.html 
      videojs('vid1').ready(function() { 
       var myPlayer = this; 
       myPlayer.src({type: 'video/youtube', src: 'https://www.youtube.com/watch?v=y6Sxv-sUYtM'}); 

       $("#change").on('click', function() { 
        myPlayer.src({type: 'video/youtube', src: 'https://www.youtube.com/watch?v=09R8_2nJtjg'}); 
       }); 
      }); 

     }); 
    })(jQuery); 
</script> 
</body> 
</html> 

или посмотреть обсуждение здесь: https://github.com/eXon/videojs-youtube/issues/339#issuecomment-164592838

Смежные вопросы