Как я могу добавить видео и плейлист на страницу, используя HTML5? - PullRequest
Новая
       30

Как я могу добавить видео и плейлист на страницу, используя HTML5?

11 голосов
/ 08 ноября 2011

Я использовал флэш-память JWPlayer 4 с опцией списка воспроизведения. Недавно я обновился до JWPlayer 5, который поддерживает HTML5. Плеер сам по себе неплохо деградирует на мобильных устройствах, которые поддерживают HTML5, но не поддерживают Flash, однако он не работает с включенной опцией плейлиста.

Так может кто-нибудь сказать мне, что я делаю неправильно с JWPlayer 5 и как заставить его работать с опцией плейлиста для мобильных устройств, или, возможно, просто научите меня лучше настраивать видео и плейлист с HTML5 ?

Ресурсы

  1. JW Пример страницы конфигурации проигрывателя и плейлиста

  2. Пример макета JWPlayer и списка воспроизведения:

screenshot-with-shadow.jpg http://img198.imageshack.us/img198/5788/screenshotwithshadow.jpg

Ответы [ 7 ]

3 голосов
/ 17 ноября 2011

Это не специфичный для JW Player ответ.

Собственный HTML-тег браузера выглядит странно, если вы заменяете теги. Вместо этого вы должны установить один атрибут src непосредственно в теге. Таким образом, вы можете изменить этот атрибут в DOM. Прежде чем изменить его, попробуйте сначала приостановить воспроизведение видео.

Я использую mediaelementjs.com. Это работает довольно хорошо.

Он не имеет встроенной функции воспроизведения, но вы можете легко создать ее самостоятельно. В конце концов, плейлист - это просто список видео, при нажатии на который вы меняете источник видео.

Медиа-элемент имеет функцию setSrc (), которая поддерживает как HTML5, так и флэш-резерв. Это работает от меня.

2 голосов
/ 24 января 2014

Война без сценария для jwplayer 6.7 и списка воспроизведения YouTube 

<script>
jwplayer("myElement").setup({
  width: "100%",
  height: "400",
  playlist: "http://gdata.youtube.com/feeds/api/playlists/PLMIePZMXPqnYlsvE_PFwe-_e336HlJF7g?max-results=50&alt=rss",
  stretching: "exactfit",
  primary: "flash",
  sharing: {link: "http://www.centraltv.fr/egypte-television/rotana-masriya"},
  autostart: "true",
  listbar: {
    position: "right",
    size: "220" 
  }
});
</script>
1 голос
/ 18 ноября 2011

Если вы просто используете видео YouTube, они предлагают (бета) видеоплеер HTML5: http://code.google.com/intl/en/apis/youtube/iframe_api_reference.html

Я использую видеоплеер HTML5 на этом сайте: http://www2.highpoint.edu

И более старые версии IE не могут использовать этот проигрыватель (очень хорошо), поэтому я по-прежнему использую теги Flash для встраивания для этих браузеров, которые выполняются через YouTube js api: http://code.google.com/intl/en/apis/youtube/js_api_reference.html

Вот пример страницы: http://www2.highpoint.edu/youtube.php?id=ht1PrQkE3WU

Я настоятельно рекомендую mediaelementjs, если вам нужен собственный видеоплеер. Все видео на нашем сайте размещены на YouTube, но мы все еще используем его в качестве аудиоплеера, как показано здесь: http://www2.highpoint.edu/president.php?mp3=http%3A%2F%2Fwww2.highpoint.edu%2Fmp3%2FNQ_LI013107.mp3

1 голос
/ 17 ноября 2011
1 голос
/ 16 ноября 2011

Это не ответ на ваш главный вопрос. Это просто общие советы.

  1. Upgrade. У меня были некоторые проблемы с 5.6, не играющим на мобильных устройствах, и обновление до 5.8 исправило это.

  2. Избегайте автозапуска в данный момент. У меня были некоторые проблемы с проигрывателем не загружается. Это может быть связано с проблемой синхронизации при загрузке больших файлов мультимедиа и попыткой запуска JavaScript. Кроме того, для пользователей Linux с более медленным соединением (например, я на 3 МБ dsl), когда точка воспроизведения догоняет, а буфер пуст, проигрыватель перестает работать.

  3. Возможно отменить режим. На мой взгляд, html5 выглядит немного лучше.

    режимы: [ {type: "html5"}, {type: "flash", src: "/media/player.swf"} ]

  4. Попробуйте использовать ту же высоту / ширину, что и носитель.

  5. Если вы воспроизводите только звук - может быть трудно найти кнопку воспроизведения (по центру), если ваша ширина имеет большое значение.

  6. Я не использую плейлист. У меня есть список записей на странице и кнопка для загрузки всплывающего окна / диалогового окна.

0 голосов
/ 18 ноября 2011

SWF не поддерживается мобильным устройством

Я думаю, что это полезно, но мне нужно два типа файла 

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" /> <!-- for iPad :) -->
  <source src="movie.ogg" type="video/ogg" /> <!--for windows  -->
  Your browser does not support the video tag.
</video>

, и я пытаюсь JavaScript, чтобы изменить фильм, и это работало в обоих

Вы должны использовать это, потому что у меня есть Ipad, и я не могу открыть видео с видеоплеера на основе SWF

0 голосов
/ 08 ноября 2011

Последняя версия JWPlayer также поддерживает воспроизведение HTML5. Теперь его также можно использовать в мобильных устройствах, не поддерживающих flash.

Еще один видеопроигрыватель HTML5 с резервной флэш-памятью - videoJS (http://videojs.com/)

...