Как задать плееру автоматическое воспроизведение при нажатии на сылку?
Не хочет работать автопроигрывание видео, что только не делал в гугле читал не один ответ не помог,
должно срабатывать включение видео при открытии модельного окна,
так же в не хочет работать,
видео работает через API
что только не делал не помогло
<!-- Модальный блок --> <div class="overlay" id="video1"></div> <div class="modal"> <div class="video__title"> Это просто заголовок и краткое описание видео </div> <div class="video" id="youtube"> <iframe width="1280" height="720" id="player" src="http://www.youtube.com/embed/J32MrXDK6oI?version=3&enablejsapi=1" frameborder="0" allow="autoplay"></iframe> </div> <a href="#close" id="stop" class="close"></a> </div> <!-- конец блока видео--> |
<!-- Модальный блок --> <div class="overlay" id="video1"></div> <div class="modal"> <div class="video__title"> Это просто заголовок и краткое описание видео </div> <div class="video" id="youtube"> <iframe width="1280" height="720" id="player" src="http://www.youtube.com/embed/J32MrXDK6oI?version=3&enablejsapi=1" frameborder="0" allow="autoplay"></iframe> </div> <a href="#close" id="stop" class="close"></a> </div> <!-- конец блока видео-->
<script type="text/javascript" src="http://www.youtube.com/player_api"></script> <script> var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player'); fs: 0; autoplay:1; /////не хочет работать } </script> |
<script type="text/javascript" src="http://www.youtube.com/player_api"></script> <script> var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player'); fs: 0; autoplay:1; /////не хочет работать } </script>
Дополнительно:
https://developers.google.com/youtube/iframe_api_r...
https://developers.google.com/youtube/player_param...
let player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { videoId: '123', playerVars: { autoplay: 1, fs: 0 }, events: { 'onReady': onPlayerReady } }); } |
let player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { videoId: '123', playerVars: { autoplay: 1, fs: 0 }, events: { 'onReady': onPlayerReady } }); }
Так же учитывайте тот факт, что многие браузеры блокируют авто-воспроизведение звуков и видео без явного действия пользователя.
Попробуйте вот такую комбинацию с помощью JS:
<video id="myVideo" autoplay> <source src="your_video.mp4" type="video/mp4"> </video> |
<video id="myVideo" autoplay> <source src="your_video.mp4" type="video/mp4"> </video>
document.getElementById('myVideo').play();
А для модалок вот так:
<a href="#" onclick="openModal()">Открыть видео</a> <!-- Модальное окно --> <div class="overlay" id="video1"> <div class="modal"> <div class="video__title"> </div> <div class="video" id="youtube"> <iframe width="640" height="360" id="player" src="https://www.youtube.com/embed/J32MrXDK6oI?version=3&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> <a href="#" onclick="closeModal()" class="close">Закрыть</a> </div> </div> <script type="text/javascript" src="http://www.youtube.com/player_api"></script> |
<a href="#" onclick="openModal()">Открыть видео</a> <!-- Модальное окно --> <div class="overlay" id="video1"> <div class="modal"> <div class="video__title"> </div> <div class="video" id="youtube"> <iframe width="640" height="360" id="player" src="https://www.youtube.com/embed/J32MrXDK6oI?version=3&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> <a href="#" onclick="closeModal()" class="close">Закрыть</a> </div> </div> <script type="text/javascript" src="http://www.youtube.com/player_api"></script>
var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { event.target.playVideo(); } function openModal() { document.getElementById('video1').style.display = 'block'; } function closeModal() { document.getElementById('video1').style.display = 'none'; player.stopVideo(); } |
var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { event.target.playVideo(); } function openModal() { document.getElementById('video1').style.display = 'block'; } function closeModal() { document.getElementById('video1').style.display = 'none'; player.stopVideo(); }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы задать плееру автоматическое воспроизведение при нажатии на ссылку, можно использовать JavaScript. Ниже приведен пример кода, который позволит вам реализовать данную функциональность:
function playVideo() { var video = document.getElementById('myVideo'); video.play(); } <a href="#">Play Video</a> <video id="myVideo" width="320" height="240" controls> Your browser does not support the video tag. </video>
В данном примере при клике на ссылку "Play Video" будет запускаться воспроизведение видео, которое указано в теге
Не забудьте указать путь к вашему видеофайлу в атрибуте src тега и проверить поддержку браузером тега