Ямы, возникшие при разработке проекта видеошоу WeChat H5

внешний интерфейс WeChat Android iOS

представлять

У меня просто есть проект под рукой, и мне нужно сделать проект видео-шоу WeChat H5. Если подумать, это кажется довольно простым. Оно состоит из двух видео. После воспроизведения первого видео нажмите кнопку, чтобы воспроизвести второе видео. Что ж, оказывается, в WeChat много подводных камней.

Устранение неполадок

Автоматический полноэкранный режим и проблемы с панелью управления воспроизведением

Это на самом деле несложно. Этого можно добиться, добавив следующие атрибуты. Я не буду здесь объяснять конкретное объяснение. Если вы не понимаете, просто скачайте его на Baidu.

    <video id="video" src="test.mp4"  webkit-playsinline="true" x-webkit-airplay="allow" airplay="allow"  x5-video-orientation="portrait" 
    x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>

Идеальное воспроизведение под ios не будет автоматически полноэкранным, установите ширину и высоту для воспроизведения Под андроидом будет использовать тот же слой для игры, и это можно рассматривать как временное решение.Это то же самое, что и на ios после поиска всей информации дома и за границей.Надеюсь есть друзья которые могут это решить и подскажут .

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

    var video = $("#video")[0];
    video.play();

Мысль о том, что это может быть достигнуто автоматическим воспроизведением видео, микроканальный механизм ограничивает автоматическое воспроизведение, переворачивая следующую информацию. К счастью, есть решение.

    var video = $("#video")[0];
    document.addEventListener("WeixinJSBridgeReady", function () {  
              video.play();  
    }, false);

Да, в WeChat есть свой метод WeixinJSBridgeReady, нам просто нужно его мониторить, IOS его прекрасно решает. "Кто, позволь мне одолжить твой телефон Android, чтобы посмотреть", почему черный экран...   js не разрешено воспроизводить видео под Android, оно должно запускаться взаимодействием с пользователем

Окончательное решение таково: Первое видео рисуется холстом, чтобы загрузить состояние загрузки второго видео.После предварительной загрузки нажмите кнопку или слайд, чтобы воспроизвести видео, создавая у пользователя ощущение интерактивного видео и решая проблему, которую андроид не может воспроизводить автоматически. Это решение также было проверено во многих случаях и, наконец, было найдено в рекламном видео Tencent о поедании курицы, и адрес также опубликован для вашей справки:
game.WeChat.QQ.com/CGI-Bin/Huan5/…

Предварительная загрузка

В упомянутой выше предзагрузке есть еще одна дыра — здесь использовался нативный API HTML5.

    video.addEventListener('canplaythrough',function(){
        //预加载完毕
      });

Хе-хе, это слишком просто, чтобы думать, на этот раз проблема с ios, android отлично выполняет обратный вызов preload, ios, похоже, этого не знает. Я проверил информацию и обнаружил, что этот callback не будет выполняться в браузере ios WeChat, а callback будет выполняться после воспроизведения (что я хочу, чтобы вы использовали). На ум приходит другое решение:

    video.buffered.length

Получите его длину загрузки и обнаружите, что, как и canplaythrough, он все еще не может быть решен под ios. Наконец, загрузка моделирования завершена под ios, и 10-секундная предварительная загрузка видео 9M должна обеспечить плавное воспроизведение.

Суммировать

Яма WeChat все еще должна быть заполнена медленно, и финальная предварительная загрузка попытается найти решение.В первой статье так много записано.

Категории