#javascript #youtube
#javascript #YouTube
Вопрос:
Я получил этот код для динамического встраивания видео YouTube при нажатии на изображение, оно работает нормально, но не воспроизводится автоматически при нажатии.
в Mozilla работает нормально, но не работает в chrome.
я размещаю изображения (миниатюры видео) вместо iframes видео на веб-странице, чтобы уменьшить загрузку страницы, и при нажатии на эти миниатюры я динамически загружаю 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> Комментарии:
1. С какой версией Chrome вы сталкиваетесь с этой проблемой?
2. developers.google.com/web/updates/2017/09/…
3. В более новых версиях Chrome оно будет автоматически воспроизводиться только при отключении звука. Смотрите раздел Рекомендации для веб-разработчиков в вышеупомянутой статье, упомянутой @Narendra, для получения информации об использовании автоматического воспроизведения с отключением, которое затем позволяет пользователям включать, если они захотят.
Ответ №1:
Начиная с версии 62, это функция в Chrome — чтобы избежать назойливой рекламы, которая будет оглушать вас при открытии страницы (https://developers.google.com/web/updates/2017/09/autoplay-policy-changes ).
Оно не будет автоматически воспроизводиться, если пользователь не активирует его для сайта; Теперь это встроено в Chrome.
Вы можете изменить это для вашей собственной установки в настройках.
Ответ №2:
Согласно комментарию от @Narendra, Chrome предотвращает автозапуск, поэтому вы не можете полагаться на автозапуск, чтобы притворяться, что реагируете на клик пользователя.
Есть 2 решения, о которых я могу подумать:
Решение 1. измените пользовательский интерфейс вашего приложения таким образом, чтобы при нажатии на миниатюру становилось ясно, что для запуска видео потребуется еще один щелчок, например, открыв его внутри модального.
Решение 2: (не тестировалось) верните видео управление воспроизведением:
-
отображается быстро загружающийся эскиз
-
вы загружаете видео, не дожидаясь, пока пользователь нажмет на него. Чтобы сохранить быструю загрузку, вы можете дождаться idle для создания базовых iframeshttps://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
-
при наведении курсора мыши на миниатюру вы скрываете миниатюру, открывая видео ниже. При нажатии оно должно воспроизводиться.
Ответ №3:
Этот код автоматически воспроизводит видео 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;amp;autoplay=1amp;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;amp;autoplay=1amp;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;amp;autoplay=1amp;mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
</body>
</html> Комментарии:
1. Братан, ты только что обновил свой вопрос. перед тем, как ваш вопрос будет неясным, указывает, что вам нужно
2. Я протестировал в своем браузере Chrome, и я не получаю никакой ошибки, о которой вы сказали
3. это не ошибка, для воспроизведения требуется двойной щелчок, но мне это нужно одним
4. В Chrome мне просто нужно всего один клик, чтобы воспроизвести видео. Попробуйте обновить ваш chrome