Входим в наиболее пострадавшую область Android — видео (браузер WeChat X5)

JavaScript
Входим в наиболее пострадавшую область Android — видео (браузер WeChat X5)

Видео HTML5 уже давно отсутствует. В принципе, нет ничего плохого в том, чтобы использовать его на ios, но это сильно пострадавшая область под Android, и различные впечатления от него плохие. В последние несколько дней я работал над совместимостью с Android, и меня просто тошнит кровью. Поэтому я намеренно подытожил несколько сильных пит-поинтов.

Некоторые часто используемые свойства и методы

video.error // null正常
video.error.code // 1用户终止 2网络错误 3解码错误 4URL无效
video.currentTime // 当前播放的位置，赋值可改变位置
video.duration // 当前资源长度，流返回无限
video.paused // 是否暂停
video.ended // 是否结束
video.autoPlay // 是否自动播放
loadstart // 客户端开始请求数据
error // 请求数据时遇到错误（可以通过上一页的属性video.error.code查看具体错误原因）
play // 开始播放时触发
pause // 暂停时触发
loadeddata // 数据已加载
waiting // 等待数据，并非错误
playing // play触发后执行一次
canplaythrough // 可以播放，已加载好
timeupdate // 播放时间改变
durationchange // 资源长度改变
...

Пит (на этот раз в основном тест в браузере WeChat X5, производительность может быть не такой, как в других браузерах Android)

Автовоспроизведение

Он будет автоматически воспроизводиться в полноэкранном режиме на iOS, вам нужно установить свойство тега видеоwebkit-playsinline, имя атрибута версий ios10 и выше изменено наplaysinline. На Android автоматическое воспроизведение невозможно, и воспроизведение видео необходимо запускать вручную. Вызывать какой-либо метод бесполезно, говорят, что это сделано для того, чтобы помочь пользователям сэкономить трафик. Но после первого запуска Android его можно запустить снова, вызвав.playдля запуска воспроизведения видео. Поэтому при выполнении совместимости вы можете установить флаг, чтобы судить, воспроизводится ли он в первый раз.

стиль по умолчанию

В Android оно не может воспроизводиться автоматически, поэтому видео будет иметь белый цвет по умолчанию плюс кнопку воспроизведения в виде круга перед воспроизведением, а фон будет чисто черным, что можно назвать очень уродливым. Для лучшего взаимодействия с пользователем карта-путеводитель, которая помогает пользователям щелкнуть, чтобы воспроизвести видео, может быть закрыта на верхнем слое видео, чтобы оно не было уродливым и давало пользователям понять, что здесь нужно щелкнуть что-то, чтобы отобразиться. Мой подход состоит в том, чтобы добавить направляющую для пальцев, а затем сделать элемент проницаемым (т. е. установитьpointer-events:none;Пусть он не будет целью каких-либо событий мыши), чтобы щелчок по элементу был эквивалентен щелчку по видео для воспроизведения. затем слушатьplayingсобытие, если видео начнет воспроизводиться, изображение гида будет скрыто. детали следующим образом:

<div class="entry_video" id="entry_video">
  <video class="entry_video_con" id="video" webkit-playsinline playsinline src="//wq.360buyimg.com/fd/h5/1707/entryvideo/images/meirenyu_7f7e46da.mp4" autoplay="true"></video>
  <div class="guide" style="width: 100%;height: 100%;top: 0;left:0;position: absolute;pointer-events:none;">
    <img src="//img11.360buyimg.com/jdphoto/s750x1334_jfs/t5668/219/7883436652/42409/2a1e4cc0/5976a71bN212dfa7b.png" alt="" style="width:100%;height:100%;pointer-events:none;">
  </div>
</div>

vi.addEventListener('playing',function(){
     $('.guide').hide();
})

Играть в полноэкранном режиме

Если на странице нет другого контента, только воспроизводится видео, эта проблема легко решается. настраиватьwebkit-playsinline, если это в браузере ядра X5, установитеx5-video-player-type="h5" x5-video-player-fullscreen="true". Так вот вопрос, а что если на странице есть не только видео, но и другой контент, например видео во всплывающем слое. С этой настройкой исходное содержимое страницы будет иметь очень очевидный процесс растяжения около 1 с. Этот процесс растяжения предназначен для подготовки к полноэкранному воспроизведению видео. Но этот опыт можно назвать очень плохим. Так что в этом случае от настройки полноэкранного воспроизведения нужно отказаться, а вот в неполноэкранном режиме воспроизведения браузера X5 Android автоматически сгенерирует полноэкранную кнопку в правом верхнем углу страницы видео, который нельзя удалить. Если пользователь нажмет, чтобы войти в полноэкранный режим, видео не останется в последнем кадре видео после воспроизведения, но, как вы знаете, появятся некоторые видео-толчки от Tencent. Если в это время выйти из полноэкранного воспроизведения, видео будет автоматически скрыто, поэтому лучше всего сделать видеоподложку, иначе будет неловко.

Обнаружить полноэкранный режим под x5

vi.addEventListener("x5videoenterfullscreen", function(){
     //进入全屏  
});  
vi.addEventListener("x5videoexitfullscreen", function(){                          
     //退出全屏 
});

использоватьvideo.addEventListener("x5videoexitfullscreen", function(){….});Он может определить, когда видео выходит из полноэкранного режима, но если все видео скрыто после обнаружения выхода, событие воспроизведения видео будет инициировано снова, чтобы завершиться ошибкой. И звоните прямо в этот слушатель.playметод не делает повтор видео. То есть видео нельзя скрыть или удалить в процессе обнаружения. Можно сказать, что это испытание бессмысленно.

жуткая яма

Под Android, если вы встряхнете видео, чтобы воспроизвести видео во всплывающем слое, если во всплывающем слое есть внешняя ссылка, нажмите, чтобы перейти, а затем вернуться, будет странный баг в видео на на этот раз, то есть он может запускаться нормально в первый раз после возврата. , после второго раза триггер будет воспроизводиться непосредственно до последнего кадра видео, установить currentTime и start на 0, а затем воспроизвести или приостановить и тогда игра будет бесполезна, ее нужно будет разрушить и построить заново.  

Различать устройства

Так как видео хорошо работает под ios, при создании совместимости можно передатьuserAgentобрабатываться отдельно. Такие как:

var vi = document.getElementsByTagName('video')[0];
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') <= -1){
   shakeWrap.show();
   if(!firstVideoLoad){
      vi.currentTime = 0;
      vi.start = 0;
      vi.play();
   }
   vi.addEventListener('playing',function(){
       firstVideoLoad = false;
       $('.guide').hide();
   })         
 }else{
      vi.play();
 }
}

Некоторые специфические ошибки в исправленной записи WeChat

  1. Вы должны подождать, пока jsbridge WeChat не будет готов запустить .play, иначе он не будет выполнен автоматически.
document.addEventListener("WeixinJSBridgeReady", function() {  
  $("#video")[0].play();  
});
  1. в стационарном подъезде иjsbridge readyТеперь, если вы используете Shake, он не сработает..play. Его необходимо предварительно загрузить перед встряхиванием следующим образом:
document.addEventListener("WeixinJSBridgeReady", function() {
  var vi = document.getElementsByTagName('video')[0];
  vi.load(); 
  vi.pause(); 
  window.addEventListener('devicemotion', deviceMotionHandler, false);
});
  1. Фиксированная запись WeChat не использует jsbridge, но событие click, воспроизводимое нажатием, может быть только событием click, а не событием touchstart.

наконец

  • Это блог, написанный ранее, вот миграция~~
  • Для получения дополнительной информации, пожалуйста, следуйте за мнойblog, дай мне звезду~~
  • Если вы считаете, что контент полезен, вы можете обратить внимание на мой официальный аккаунт «Front-end Q» и учиться и расти вместе~~
    GitHub
Категории