Баги HTML5 <audio> и <video> media bug list
 

Короче я подумал, что не помешает что типо bug list, по media, что бы можно было сразу учится на чужих граблях, а не изобретать свои.
Тут я предлагаю публиковать изсветные баги, связанные с audio, video..
И так начну я:

1. Конвертация видео, долго не могу нормально конвертнуть видео. Форматы
Решение:
Webm:

ffmpeg -i source.mp4 -pass 1 -codec:v libvpx -b:v 2000k -codec:a libvorbis \
  -b:a 100k -s 1280x720 -f webm -y /dev/null
ffmpeg -i source.mp4 -pass 2 -codec:v libvpx -b:v 2000k -codec:a libvorbis \
  -b:a 100k -s 1280x720 -y output.webm

mp4 (Спасибо за подсказку Илье Кантору):

ffmpeg -i INPUTFILE -c:v libx264 -с:a libfaac -crf 27 -preset veryfast -profile:v main -level 3.1 -movflags +faststart OUT.mp4

2. события canplaythrough и canplay в лисе срабатывают только после вызова play, 100% воспроизводится в лисе 35+ (windows/linux)

function canPlay ( video, callback  ) {
            var i = 0,
            volume = video.volume,
            onCanPlay = function () {
                video.removeEventListener ( "canplaythrough", onCanPlay );
                callback( null );
            };

        //firefox canplay events fix
        video.volume = 0;
        video.play();
        video.pause();
        video.currentTime = 0;
        video.volume = volume;

        if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
            onCanPlay();
        }

        else if ( "oncanplaythrough" in video ) {
          return video.addEventListener ( "canplaythrough", onCanPlay );
        }
        else {
            (function waitCanPlay() {

                if ( video.readyState == video.HAVE_ENOUGH_DATA ) {
                    return callback( null );
                }

                else if ( ++i == 15 ) {
                    return callback ( "Failed download video" );
                }

                setTimeout( waitCanPlay, 300 );
            } () );
        }
    };

3.
4.

5. Видео не воспроизвоится на некоторых платформах, если просто кинуть в директорию и вставить ссылку. Проблема решается сервером, на ноде вот пример

var http = require('http'),
    fs = require('fs'),
    pathUtil =require ( "path" ),
    util = require('util');

var path = pathUtil.join( __dirname, "/video/video3.mp4" );

var port = process.env.PORT || 8888;

http.createServer(function (req, res) {

    var stat = fs.statSync(path);
    var total = stat.size;

    if (req.headers.range) {   
        var range = req.headers.range;
        var parts = range.replace(/bytes=/, "").split("-");
        var partialstart = parts[0];
        var partialend = parts[1];

        var start = parseInt(partialstart, 10);
        var end = partialend ? parseInt(partialend, 10) : total-1;
        var chunksize = (end-start)+1;
        console.log('RANGE: ' + start + ' - ' + end + ' = ' + chunksize);

        var file = fs.createReadStream(path, {start: start, end: end});
        res.writeHead(206, { 'Content-Range': 'bytes ' + start + '-' + end + '/' + total, 'Accept-Ranges': 'bytes', 'Content-Length': chunksize, 'Content-Type': 'video/mp4' });
        file.pipe(res);

    } else {

        console.log('ALL: ' + total);
        res.writeHead(200, { 'Content-Length': total, 'Content-Type': 'video/mp4' });
        fs.createReadStream(path).pipe(res);
    }
}).listen( port );

В iOS невозможно изменить громкость <audio> и <video> элементов. Следующие действия игнорируются:

media.volume = 0;
media.muted = true;

В Safari 6 и стандартном браузере в Android 4.3 некоторые события <audio> и <video> элементов работают только через addEventListener, например:

media.ontimeupdate = function () {…}; // не работает
media.addEventListener('timeupdate', function () {…}); // работает

Свойства duration и currentTime перед использованием лучше проверять с помощью Number.isFinite.

Фикс есть?

Баг в андроиде < 5, во воспроизводится в хроме на всех устройствах.
Если использовать для функции drawImage в качестве первого аргумента HTMLVideoElement ( вместо изображения ), то он нечего не рисует

https://code.google.com/p/chromium/i...tail?id=174642

var video = document.createElement("video");
...

ctx.drawImage( video, 0, 0, ... ); //не работает

Как обойти баг не нашел..


Еще в Safari на IOS видео при запуске открывается на весь экран, и в Safari вообще не работает play

скрыть регулятор громкости и кнопку mute в своем кастомном интерфейсе :)

Стандартный браузер в Android 4.3 игнорирует preload=none и делает запрос за метаданными, и если вызывать play до загрузки метаданных, то duration будет равна 1, а воспроизведение никогда не начнется.

Я заметил, что у тега аудио до первого нажатия на play() после загрузки страницы и на компьютере не считывается свойство audio.duration Это можно считать багом , или я что-то не допонял?

Это не баг! Что бы заполнились метаданные, нужно хотя бы поставить тегу audio атрибут preload со значением metadata. Пример:

<audio preload="metadata" ... ></audio>

Читайте: https://developer.mozilla.org/en-US/.../Element/audio

Так я уже пробовал, не помогает. Похоже, что дело в другом - с момента объявления тега аудио до момента считывания duration должно пройти не меньше, чем столько-то времени:

<audio id=audio preload="metadata" src="1.mp3" controls></audio>

<script>
alert(audio.duration); // Не успевает считать из файла
setTimeout(function(){
	alert(audio.duration); // Успевает
},500);
</script>

Т. е., если duration нужно где-то использовать по ходу загрузки страницы, напрашивается необходимость создания задержки. А preload="metadata" при этом, получается, даже не играет роли. (Испытывал в браузере Амиго)

а вы думали что браузер будет синхронно считывать метаданные файлов? Конечно же это происходит асинхронно и ничего в этом удивительного нет. Это же javascript, он по сути своей асинхронный язык программирования. Дождитесь события onload в браузере и делайте необходимые действия.