включение воспроизведения youtube с помощью обложки video.js

Question

ОК Итак, я пытаюсь обернуть/скин, видео youtube с проектом video.js, чтобы аналогичный внешний вид других видео на моем сайте. Теперь в соответствии с документами, которые вы можете видеть here Итак, у меня есть заголовок, который правильно воспроизводит и обменивает тег видео для example_video_1, как в getting started section Однако при попытке использовать видео с источником youtube у меня есть этот html элемент:

<video id="example_video_1" class="video-js vjs-default-skin" 
    controls preload="auto" width="640" height="264" 
    poster="http://ec2-54-227-116-247.compute-1.amazonaws.com/models/site-  templates/images/cover_img/ted_cover.jpg" 
    data-setup='{"techOrder": ["youtube"]}'> 
    <source src="http://www.youtube.com/watch?v=xYemnKEKx0c" type='video/youtube' /> 
    </video> 

Теперь изображение tMy обложки отображается, но не отображается кнопка воспроизведения. Я что-то пропустил в документах? Или я неправильно понял документы, а youtube - всего лишь пример, и мне все еще нужно написать API-оболочку, чтобы сделать эту работу, и они только что показали это как пример? любая помощь или проницательность были бы очень благодарны!

Этот вопрос также был задан here 6 months назад до выхода videojs v4

Answer 1

Вы, вероятно, генерируя ошибки в консоли JavaScript, а videojs не знает, как играть в YouTube видео по умолчанию.

Эта документация выглядит некорректной для меня. Я не вижу никакого реального кода в реестре github (вне документов), который знает, как воспроизводить видео с YouTube.

Это также звучит как запрос на растяжение, на который ссылается связанный вопрос, который был закрыт, с предложением сделать это как плагин - который appears to have happened.

Использование плагина довольно прямолинейно. В дополнении к включению сценария video.js, вы также включить сценарий плагин от https://github.com/eXon/videojs-youtube:

<script src="js/video.js"></script> 
<script src="js/media.youtube.js"></script> 

И единственное изменение, которое вы должны сделать для вашего видео тега должен включать в ГКЗ в данной-установке json:

<video id="example_video_1" class="video-js vjs-default-skin" controls 
     preload="auto" width="640" height="264" 
     poster="http://ec2-54-227-116-247.compute-1.amazonaws.com/models/site-templates/images/cover_img/ted_cover.jpg" 
     data-setup='{"techOrder":["youtube"], "src":"http://www.youtube.com/watch?v=xYemnKEKx0c"}'> 
</video> 

Вот working example. Обратите внимание, что этот пример ссылается на плагин rawgithub js, поэтому вы захотите загрузить локальную копию курса.

Я также заметил, что плакат не загружается правильно. Это ошибка в плагине, но есть немедленный обходной путь, если вам интересно. См. Это example