Аудио и видео HTML5 — сводка совместимости (1)

HTML
Резюме и запись в работе, пишу первый раз, прошу указывать на проблемы, буду дальше записывать и дополнять...

1. Аудио

1. Мониторинг воспроизведения завершен

Неточно отслеживать завершенное событие, вы можете отслеживать событие timeupdate, чтобы определить, что текущий ход воспроизведения currentTime больше или равен общей продолжительности, воспроизведение завершено;

var oAudio = document.getElementById('audio_player');
oAudio.addEventListener('timeupdate', function () {  
  // 监听播放完成，ended 事件不准确  
  if (oAudio.currentTime >= oAudio.duration) {    
    _this.endFn();  
  }}, 
false);

2. Установите текущую точку времени воспроизведения аудио

Прямая настройка системы ios недействительна.Вы можете следить за канплей (когда можно будет играть) и потом выставить currentTime;

if (isIos) {   
    oAudio.addEventListener('canplay', () => {       
        oAudio.currentTime = '';   
    }, { once: true })
} else {  // 安卓没有 canplay 事件    
    oAudio.currentTime = '';
}


3. Управление звуком

Управление звуком для Android осуществляется в мониторе воспроизведения, для iOS — в canplay.

if (isIos) {       
    oAudio.addEventListener('canplay', () => {       
         // ios 音频打点 可以在这里处理
    }, { once: true })
} else {  // 安卓没有 canplay 事件    
    oAudio.addEventListener('play', function () {        
        if (Util.isAndroid) {       
            // 打点代码     
        }
    }, { once: true });
}


4. Установите эффект загрузки звука

ios может убрать эффект загрузки при прослушивании события canplay и добавить эффект загрузки при прослушивании событий loadstart иloadeddata;

if (isIos) { 
    oAudio.addEventListener('loadstart', () => {    
        if (isIos) {        
            _this.isLoadaudio = true;    
        }
    }, false)
    oAudio.addEventListener('loadeddata', () => {    
        if (isIos) {        
            _this.isLoadaudio = true;    
        }
    }, false)
   
    oAudio.addEventListener('canplay', () => {        
        _tihs.isLoadaudio = false;    
    }, { once: true }
)}

Android не рекомендует добавлять эффект загрузки, потому что нет точного прослушивателя событий, который нужно удалить, иначе его можно только добавить и нельзя удалить (Android поддерживает loadstart иloadeddata, но не поддерживает canplay)

5. Вопросы по автозапуску:Его нужно запустить один раз, чтобы играть;


6. Мультиаудио обеспечивает непрерывное воспроизведение:После отслеживания завершения текущего воспроизведения звука ios продолжает использовать тот же объект аудиопроигрывателя и заменяет его новым адресом воспроизведения src, что позволяет добиться эффекта непрерывного воспроизведения;

<audio name="media" id="audio_player" preload>     
    <source :src="audio_url" type="audio/mpeg">
</audio>

var oAudio = document.getElementById('audio_player');
oAudio.src = self.pptData.ppt_list[index].audio_url;
oAudio.play();


7. Установите событие мониторинга для выполнения только один раз, иначе оно будет выполнено несколько раз.

Третий параметр addEventListener имеет значение {once: true};

oAudio.addEventListener('play', function () {}, { once: true });


8. При наблюдении за фоновой работой браузера WeChat запрещено играть

$(document).on('visibilitychange', () => {
    var isHidden = document.hidden;
    var oAudio = document.getElementById('audio_player');
    if (isHidden) { // 离开微信浏览器，后台运行
        // 状态改为暂停
    } else {  // 再次进入浏览器
        if (oAudio.paused) { // 锁屏时点击暂停了
            // 状态改为暂停            
        } else { 
            // 状态改为播放
        }          
    }        
})


2. Видео

1. В ядре X5 воспроизведение тега видео не происходит автоматически в полноэкранном режиме.

Просто добавьте в видео webkit-playsinline playsinline x5-playsinline (основное внимание уделяется роли x5-playsinline)

<video class="qvideo" id="qvideo-wrap" playsinline webkit-playsinline x5-playsinline>
</video>

Примечание: x5 kernel-airplay="allow" x5-video-player-fullscreen="true" x-webkit-airplay="allow" нельзя добавить в Android (атрибут playsinline будет недействителен после его добавления)


2. На телефонах Android уровень видео самый высокий, и другие всплывающие окна будут заблокированы;

Когда появится всплывающее окно, высота видео может быть установлена ​​на 0;


Категории