Лучший способ сделать видео список воспроизведения HTML5? - PullRequest
Новая
       22

Лучший способ сделать видео список воспроизведения HTML5?

2 голосов
/ 25 декабря 2011

Я пытаюсь создать плейлист с использованием функции видео HTML5 в современных браузерах.

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

$("second video link").click (function(){
   $("#video wrapper").remove();
   $("#video wrapper").append(" new video tags ");
});

Я думаю, что должен быть лучший способ ...

1 Ответ

2 голосов
/ 26 декабря 2011

ответ зависит от того, какой подход вам нравится и в каких браузерах вы хотите показывать видео. IE9 не работает с функцией video.src (), если вы указали несколько источников через подэлементы источника. Если вам требуется только один браузер, проверьте caniuse.com на наличие webm и mp4, чтобы узнать, какой браузер поддерживает какой кодек. Если вы обнаружите, что вам нужно несколько кодеков, так как ваша аудитория использует как браузеры с mp4, так и с веб-браузером, вам нужно будет проверить с помощью .canPlayType () перед использованием функции .src () и устранить источники, которые могут выйти из строя (хотя эта проверка также не является пуленепробиваемой). Android 2.2 (или был 2.1, пожалуйста, поправьте меня) вообще не знает функции. Некоторые браузеры Mac OSX имеют похожие проблемы.

нижняя строка: вы должны использовать комбо canPlayType () для фильтрации неправильных источников, затем использовать массив или любой другой сортируемый список, чтобы получить следующий видеоисточник и установить его после того, как событие video завершило событие video используя функцию src (). Мне также нравится устанавливать атрибут type элемента video при изменении источника, чтобы обойти причуды некоторых браузеров.

возможные типы: video / mp4 для файлов mp4 и m4v; видео / вебм для вебм файлов; видео / ogg для файлов ogv; либо предоставьте тип через какой-нибудь сценарий на стороне сервера, либо проверьте расширение файла в JS, а затем выполните switch () {...} или if else () ...

Вы можете легко получить расширение через 

var sourceExt = (sourceString.split(".")).pop();

где sourceString - переменная, содержащая URL вашего источника

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

...