Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.03.2015, 01:57
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Баги 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.
Сообщение от Octane
В том же safari не всегда срабатывает canplay, нужно подписываться на canplay и canplaythrough.
canPlayType может вернуть "no" вместо пустой строки.

4.
Сообщение от Octane
В Safari 7-8 если audio/video элемент уже проигрывался и вызвать play синхронно со сменой src, то воспроизведение не начнется.
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.

Последний раз редактировалось cyber, 15.03.2015 в 18:28.
Ответить с цитированием
  #2 (permalink)  
Старый 15.03.2015, 18:18
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

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 );
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.

Последний раз редактировалось cyber, 15.03.2015 в 18:23.
Ответить с цитированием
  #3 (permalink)  
Старый 01.05.2015, 14:31
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

В 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.
Ответить с цитированием
  #4 (permalink)  
Старый 03.05.2015, 19:39
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

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

Баг в андроиде < 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
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.

Последний раз редактировалось cyber, 03.05.2015 в 19:42.
Ответить с цитированием
  #5 (permalink)  
Старый 04.05.2015, 00:43
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Сообщение от cyber
Фикс есть?
скрыть регулятор громкости и кнопку mute в своем кастомном интерфейсе
Ответить с цитированием
  #6 (permalink)  
Старый 15.06.2015, 15:44
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 09.07.2008
Сообщений: 3,873

Стандартный браузер в Android 4.3 игнорирует preload=none и делает запрос за метаданными, и если вызывать play до загрузки метаданных, то duration будет равна 1, а воспроизведение никогда не начнется.
Ответить с цитированием
  #7 (permalink)  
Старый 26.06.2015, 16:03
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

Я заметил, что у тега аудио до первого нажатия на play() после загрузки страницы и на компьютере не считывается свойство audio.duration Это можно считать багом , или я что-то не допонял?
Ответить с цитированием
  #8 (permalink)  
Старый 26.06.2015, 16:08
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Опан
Это можно считать багом , или я что-то не допонял?
Это не баг! Что бы заполнились метаданные, нужно хотя бы поставить тегу audio атрибут preload со значением metadata. Пример:
<audio preload="metadata" ... ></audio>
Читайте: https://developer.mozilla.org/en-US/.../Element/audio
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #9 (permalink)  
Старый 27.06.2015, 10:49
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

Сообщение от devote
preload="metadata"
Так я уже пробовал, не помогает. Похоже, что дело в другом - с момента объявления тега аудио до момента считывания 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" при этом, получается, даже не играет роли. (Испытывал в браузере Амиго)
Ответить с цитированием
  #10 (permalink)  
Старый 27.06.2015, 11:04
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Опан
не помогает.
а вы думали что браузер будет синхронно считывать метаданные файлов? Конечно же это происходит асинхронно и ничего в этом удивительного нет. Это же javascript, он по сути своей асинхронный язык программирования. Дождитесь события onload в браузере и делайте необходимые действия.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема в работе с тегами html zeraid Общие вопросы Javascript 16 11.05.2011 17:23