HLS Stream не запускается автоматически после videojs-preroll в плеере на мобильном телефоне
Я создал проигрыватель videoJS для размещения потока HLS, и он корректно работает с плагином videojs-contrib-hls. Я также включил плагины videojs-contrib-ads и videojs-preroll.
Предварительная реклама успешно воспроизводится на настольных компьютерах и мобильных устройствах, но поток HLS не запускается автоматически на мобильных устройствах. Я попытался включить автозапуск в элементах управления. Поток работает правильно, но я бы хотел, чтобы это был более плавный переход. В настоящее время пользователь должен будет снова нажать кнопку воспроизведения после рекламы. у кого-нибудь есть решение?
Вот код Это шаблон начальной загрузки, который я оставил на всякий случай:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link href="http://vjs.zencdn.net/6.6.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/6.6.3/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script>
var player = videojs('example-video');
player.play();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.1.0/videojs-contrib-ads.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.1.0/videojs-contrib-ads.css" rel="stylesheet" type="text/css">
<script src="js/videojs-preroll.js"></script>
<link href="css/videojs-preroll.css" rel="stylesheet" type="text/css">
</head>
<body>
<video poster="" id="example-video" class="video-js vjs-default-skin vjs-fluid" controls preload="auto" width="1920" height="1080" data-setup='{}'>
<source src="http://<location>/hls/test.m3u8" type="application/x-mpegURL">
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<script>
videojs('example-video', {}, function(){
var player = this;
player.preroll({
src: "ads/testad.mp4"
});
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>