Настройка видео HTML5, не работающего в FF или Safari

Создание этого веселого веб-проекта на www.graysonearle.com/bluemen/index2.html, и я сталкиваюсь со всеми проблемами. Кто-то из SO помог мне убедиться, что видео загружено перед игрой, но это решение работает только на Chrome для меня. Вот код:Настройка видео HTML5, не работающего в FF или Safari

for (var i=0;i<16;i++) { 
     document.write('<div class="vidBox" id="box'+i+'">'); 
     document.write(' <video class="vid" loop="loop" preload="metadata" id="vid'+i+'">'); 
     document.write(' <\/video>'); 
     document.write('<\/div>'); 
    } 


var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'videos/fullvid' + ext, true); 
xhr.responseType = 'blob'; 
xhr.onload = function(e) { 
    if (this.status == 200) { 
    console.log("got it"); 
    var myBlob = this.response; 
    var vid = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob); 
    // myBlob is now the blob that the object URL pointed to. 
     for (var i=0;i<16;i++) { 
     display(i,vid) 
    } 
    } 
}; 
xhr.send(); 

     function display(i,vid){ 

    var video = document.getElementById("vid"+i); 
    console.log(video); 
    video.src = vid; 

}

редактировать: уточнить, я хочу эту сетку 4x4 видео для загрузки (я добавлю экран загрузки позже, может быть) без автоматического воспроизведения обязательно. после загрузки, нажмите PLAY ALL, чтобы они все играли сразу. нажатие FISH делает шаблон в сетке фильма.

источник

2013-02-25 prismspecs

Я не уверен, почему вы используете document.write, чтобы добавить их, но в любом случае попробуйте добавить свойство автовоспроизведением к видео, например ...

<video controls="controls" autoplay="autoplay"> 
    Your browser does not support the video tag. 
</video>

источник

2013-02-25 23:24:10

Могу ли я видеть ваше доктайп. Обратите внимание, что doctype для html5 не совпадает с более ранними версиями html. Проверьте свой Doctype. Это должно быть только <!DOCTYPE HTML>.

EDIT Собственные теги для видео html5. Я думаю, вам, возможно, придется изменить свой синтаксис.

<video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
Your browser does not support the video tag. 
</video>

И принять к сведению ваши видео кодеков также:

MP4 = MPEG 4 файлов с H264 видео кодек и AAC аудио кодек

WebM = WebM файлы с видеокодек VP8 и Vorbis аудио кодек

Ogg = Ogg Theora файлы с видео кодеком и Vorbis аудио кодек

Вот что-то еще может понадобиться для некоторых браузеров для воспроизведения видео:

videoTag.src = "vid"; 
videoTag.load(); 
videoTag.play();

источник

2013-02-25 23:24:45

Uh oh, был установлен в Я изменю его ... без изменений. Спасибо хоть! – prismspecs

Ваш синтаксис или версия браузера должны быть виновниками. Попробуйте проверить код в простом html (без ajax и javascript). Просто попробуйте воспроизвести видео на своей веб-странице с помощью html5, чтобы увидеть, как браузеры реагируют. Я успешно воспроизводил видео html5 на моем, но все они обновлены до последних версий. В той мере, в какой это работает на хроме. Это должно быть как-то связано с браузером, а не с кодом. –

Это довольно сложный способ справиться с тем фактом, что браузеры не играют хорошо, когда у меня есть 16 видео, ожидающих воспроизведения одновременно. – prismspecs

Помимо «интересного» способ, который вы добавляете видео в HTML, вы должны скорее полагаться на HTML5 media events.

Прежде всего, если вы хотите, чтобы видео действительно загружалось автоматически, не используйте preload="metadata", так как это загрузит только метаданные видео. Установка предварительной нагрузки до "auto" должна помочь. Кроме того, вы можете полностью исключить его, так как значение auto. (Хотя кажется, что всякий раз, когда Opera добавляет поддержку этого атрибута, они могут сделать его по умолчанию "metadata", так что вам все равно может быть лучше установить его на "auto".)

Постарайтесь избавиться от всего беспорядка XHR. Тогда вы могли бы сделать что-то вроде этого:

var videos = document.getElementsByTagName('video'); 

for(var i = 0, ii = videos.length; i < ii; i++) { 
    videos[i].addEventListener('canplaythrough',enablePlayback,false); 
} 

var videosLoaded = 0; 

function enablePlayback(e) { 
    videosLoaded++; 
    if(videosLoaded === 16) { 
    // enable a play button or do whatever you want 
    // in this case: start playing all the videos at once 
    for(var i = 0, ii = videos.length; i < ii; i++) { 
     videos[i].play(); 
    } 
    } 
}

Этот код в основном добавляет прослушиватель canplaythrough событие для всех видео, то, как каждый из видео запускает его, они будут увеличивать переменную videosLoaded одним, и когда последнее видео вызывает его, и videosLoaded показов 16 (количество видео в вашей сетке 4x4), он назовет play() на всех объектах видео.

Вам, вероятно, придется поэкспериментировать с этим совсем немного, чтобы исправить это (у меня нет 16 маленьких и коротких видеороликов под рукой, чтобы проверить это адекватно), но это должно привести вас вправо направление. Возможно, вы захотите заглянуть в video.load(), если preload="auto" не загружает все видео (может случиться, так как их так много).

Если ни video.load(), ни preload="auto", кажется, сделать трюк, вы можете установить все видео автовоспроизведение, а затем прослушивайте play события и приостановить их мгновенно (и затем удалить слушатель play событий). После этого, как и раньше, используйте тот же код для canplaythrough.

источник

2013-02-26 01:07:32 Daiz

Большое спасибо за то, что нашли время. Одна из проблем, с которыми я столкнулся, заключается в том, что браузер просто откажется от загрузки 8 ~ видео. Это была начальная причина для материала XHR, но, возможно, есть лучший выход. Проверьте http://graysonearle.com/bluemen/index3.html на Chrome – prismspecs

Ой, подождите. После перезагрузки страницы несколько раз он работает. Может быть, эта связь засасывает ... дайте мне знать, если это сработает для вас. Еще раз спасибо. – prismspecs

Настройка видео HTML5, не работающего в FF или Safari

ответ

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