Как добавить видео и плейлист на страницу с помощью HTML5?

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

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

Ресурсы

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

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

screenshot-with-shadow.jpg

Ответы

Ответ 1

Это не конкретный ответ JW Player.

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

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

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

Элемент мультимедиа имеет функцию setSrc(), которая поддерживает как HTML5, так и Flash. Это работает от меня.

Ответ 2

Voila un bout de script pour jwplayer 6.7 et playlist 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>

Ответ 3

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

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

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

  • Может быть, переопределить режим. Для моих медиа html5 кажется немного лучше.

    : [ {type: "html5" }, {type: "flash", src: "/media/player.swf" } ]

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

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

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

Ответ 5

Если вы просто используете видеоролики 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

Ответ 6

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

Еще один видеоплеер HTML5 с флэш-резервом - videoJS (http://videojs.com/)

Ответ 7

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