HTML5 видео не работает в мобильных браузерах - PullRequest
Новая
       9

HTML5 видео не работает в мобильных браузерах

0 голосов
/ 17 октября 2018

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

Мой HTML-код выглядит следующим образом 

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
    width:100%;
    max-width:500px;
    height:auto;
}
#either-gif-or-video video {
    display: none;
}
 @media (-webkit-video-playable-inline) {
#either-gif-or-video img {
    display: none;
}
#either-gif-or-video video {
    display: initial;
}
}
</style>
<script>

    window.onload = function() {
        startPlayback();

    }

    function fallback(video)
    {
        alert(video);
    }


    var video;
  var canvas;

  function startPlayback()
  {
    if (!video) {
      video = document.createElement('video');
      video.src = 'https://mytestsite.com/myvideo.mp4';
      video.autoplay = true;
      video.loop = true;
      video.muted = true;
      video.playsinline = true;
      video.controls = true;
      video.addEventListener('playing', paintVideo);
    }
    var promise = video.play();
    if (promise !== undefined) {
     promise.then(_ => {
       //alert('Autoplay started!');
     }).catch(error => {
       //alert('Autoplay was prevented.');
       // Show a "Play" button so that user can start playback.
     });
    }
  }

  function paintVideo()
  {
    if (!canvas) {
      canvas = document.createElement('canvas');
      canvas.width = 400;//video.videoWidth;
      canvas.height = 200;//video.videoHeight;
      //document.body.appendChild(canvas);
      document.getElementById("videoID").appendChild(canvas);

    }

    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    if (!video.paused)
      requestAnimationFrame(paintVideo);
  }

</script>
<body  onclick="startPlayback()">
<h2>autoplay</h2>
<div id="videoID"></div>
<button onclick="startPlayback()" id="my-link">Start Playback</button>
</body>
</html>

1 Ответ

0 голосов
/ 17 октября 2018

Вы не говорите, в чем проблема, но правила видео для мобильных браузеров меняются довольно часто, поэтому стоит проверить последний просмотр.

Следующее является хорошим источником и содержит приведенный ниже пример, которыйработает и может быть использован в качестве основы для вашей страницы: 

<video autoplay loop muted playsinline>
  <source src="image.mp4">
  <source src="image.webm" onerror="fallback(parentNode)">
  <img src="image.gif">
</video>

Обновлено с полным примером кода HTML5: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Video Test</title>
</head>

<body>
  <h1>Video Test</h1>
  <video autoplay loop muted playsinline>
    <source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
  </video>
</body>

</html>

Протестировано с iPhone 7 и iOS 11.2.6 и автоматически воспроизводится.

...