YouTube видео не воспроизводится автоматически при нажатии в Chrome - PullRequest
Новая
       1

YouTube видео не воспроизводится автоматически при нажатии в Chrome

7 голосов
/ 28 марта 2019

Я получил этот код для динамического встраивания видео на YouTube, когда по клику по изображению оно работает нормально, но не воспроизводится автоматически при нажатии.

нормально работает в Mozilla, но не работает в Chrome.

Я размещаю изображения (миниатюры видео) вместо видеофреймов на веб-странице, чтобы уменьшить загрузку страницы, и когда нажимаются эти миниатюры, я загружаю iframe динамически через jquery, все работает нормально, но загруженное видео не воспроизводится автоматически, но дает другую кнопкудля воспроизведения видео на YouTube.

Я хочу, чтобы оно воспроизводилось автоматически при нажатии в Chrome.пожалуйста, помогите 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!DOCTYPE html>

<html>
<head>
	<title>YouToubes replace example</title>
	<script src="jquery-1.11.2.min.js"></script>
	<style>
		p {margin-bottom:2em;}
		iframe,.ytLoader {display:block;margin:0 auto;width:50vw;height:37.5vw;border:0.5vw solid #ccc;}
		.ytLoader {position:relative;cursor:pointer;overflow:hidden;}
		.ytLoader>.cover {width:100%;height:auto;}
		.ytLoader>.playBtn {position:absolute;top:50%;left:50%;width:20%;height:auto;transform:translate(-50%,-50%);opacity:0.5;}
	</style>
	<script>
		function youTubes_makeDynamic() {
			var $ytIframes = $('iframe[src*="youtube.com"]');
			$ytIframes.each(function (i,e) {
				var $ytFrame = $(e);
				var ytKey; var tmp = $ytFrame.attr('src').split(/\//); tmp = tmp[tmp.length - 1]; tmp = tmp.split('?'); ytKey = tmp[0];
				var $ytLoader = $('<div class="ytLoader">');
				$ytLoader.append($('<img class="cover" src="https://i.ytimg.com/vi/'+ytKey+'/hqdefault.jpg">'));
				$ytLoader.append($('<img class="playBtn" src="play_button.png">'));
				$ytLoader.data('$ytFrame',$ytFrame);
				$ytFrame.replaceWith($ytLoader);
				$ytLoader.click(function () {
					var $ytFrame = $ytLoader.data('$ytFrame');
					$ytFrame.attr('src',$ytFrame.attr('src')+'?autoplay=1');
					$ytLoader.replaceWith($ytFrame);
				});
			});
		};
		$(document).ready(function () {youTubes_makeDynamic()});
	</script>
</head>

<body>

<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>


</body>

</html>

Ответы [ 3 ]

5 голосов
/ 02 апреля 2019

Начиная с версии 62, это особенность в Chrome - чтобы не раздражать рекламу, чтобы выкрикивать вам звук при открытии страницы (https://developers.google.com/web/updates/2017/09/autoplay-policy-changes).

Это будет не автозапускесли пользователь не активирует его для сайта; в Chrome он встроен.
Вы можете изменить это для своей установки в настройках.

5 голосов
/ 02 апреля 2019

Согласно комментарию @Narendra, Chrome запрещает автоигру, поэтому вы полагаетесь на автоигру, притворяясь, что реагируете на щелчок пользователя.

Есть два решения, о которых я могу подумать:

Решение 1. Измените UX вашего приложения, чтобы при нажатии на миниатюру стало ясно, что для запуска видео потребуется еще один щелчок, например, открыв его внутри модального окна.

Решение 2: (не проверено) вернуть управление воспроизведением видео:

  1. Вы отображаете миниатюру с быстрой загрузкой

  2. Вы загружаете видео, не дожидаясь, пока пользователь нажмет на него. Чтобы сохранить быструю загрузку, вы можете подождать простоя, чтобы создать базовые фреймы https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback

  3. при наведении на миниатюру, вы скрываете миниатюру, открывая видео ниже. По нажатию должно сыграть.

0 голосов
/ 01 апреля 2019

Этот код автоматически воспроизводит видео YouTube

В вашем коде проблема заключается в том, что Javascript код и во встроенном код URL YouTube.

вы можете попробовать это: 

<!DOCTYPE html>

<html>
<head>

    <title>YouToubes replace example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!--<script src="jquery-1.11.2.min.js"></script>-->
    <style>
        p {
            margin-bottom: 2em;
        }

     
    </style>
  
</head>

<body>

    <p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0?rel=0;&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
    <p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0?rel=0;&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
    <p><iframe width="560" height="315" src="https://www.youtube.com/embed/YgmIibSnZs0?rel=0;&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
   

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...