Bymas | Как заставить видео встать на паузу

Тема закрыта by

pyrokinesis
Причина: решено

Короче сделал видео с ютуба в модельном окне, но закрываю окно а видео всеравно продолжает работать вот видеоскриншот https://skrinshoter.ru/vNi92GSkSqW?a в скрипте прописана функция остановки (паузы) видеоролика, но поче му то не работает, в консоле ошибок тоже нет.

javascript

   <script>  var player;         function onYouTubePlayerAPIReady() {         player = new YT.Player('player');         }          $('#stop').click(function(){         player.stopVideo()         }) </script>

вот индиивикатор закрытия окна

html

   <a href="#close" id="stop" class="close"></a>

в низу сам скрипт
------

87058_videomodalblock.zip (5.0 Kb)
Скачиваний: 95

pyrokinesis , сделай плеер нормальный вот тут все описанно как делать JavaScript используй и html5
Вот пример
https://skillbox.ru/media/code/kak_sozdat_pleer_dlya_sayta/

pyrokinesis (10 янв 2024, в 16:57)
Короче сделал видео с ютуба в модельном окне, но закрываю окно а видео всеравно продолжает работать вот видеоскриншот https://skrinshoter.ru/vNi92GSkSqW?a в скрипте прописана функция остановки (паузы) видеоролика, но поче му то не работает, в консоле ошибок тоже нет.

javascript

   <script>  var player;         function onYouTubePlayerAPIReady() {         player = new YT.Player('player');         }          $('#stop').click(function(){         player.stopVideo()         }) </script>

вот индиивикатор закрытия окна

html

   <a href="#close" id="stop" class="close"></a>

в низу сам скрипт

Вот примет кнопок старт и пауза
//Кнопки
var actionButton = document.getElementById('video-hud__action');
var muteButton = document.getElementById('video-hud__mute');
var volumeScale = document.getElementById('video-hud__volume');
var speedSelect = document.getElementById('video-hud__speed');
function videoAct() { //Запускаем или ставим на паузу
if(videoPlayer.paused) {
videoPlayer.play();
actionButton.setAttribute('class','video-hud__element video-hud__action video-hud__action_play');
} else {
videoPlayer.pause();
actionButton.setAttribute('class','video-hud__element video-hud__action video-hud__action_pause');
}
if(durationTime.innerHTML == '00:00') {
durationTime.innerHTML = videoTime(videoPlayer.duration); //Об этой функции чуть ниже
}

Fly (10 янв 2024, в 17:49)
Вот примет кнопок старт и пауза
//Кнопки
var actionButton = document.getElementById('video-hud__action');
var muteButton = document.getElementById('video-hud__mute');
var volumeScale = document.getElementById('video-hud__volume');
var speedSelect = document.getElementById('video-hud__speed');
function videoAct() { //Запускаем или ставим на паузу
if(videoPlayer.paused) {
videoPlayer.play();
actionButton.setAttribute('class','video-hud__element video-hud__action video-hud__action_play');
} else {
videoPlayer.pause();
actionButton.setAttribute('class','video-hud__element video-hud__action video-hud__action_pause');
}
if(durationTime.innerHTML == '00:00') {
durationTime.innerHTML = videoTime(videoPlayer.duration); //Об этой функции чуть ниже
}

для меня это не понять , ((((

pyrokinesis (10 янв 2024, в 18:19)
для меня это не понять , ((((

Мой тебе совет тогда посмотри готовый видео плеер и сделай такой себе на сайт

Fly (10 янв 2024, в 18:27)
Мой тебе совет тогда посмотри готовый видео плеер и сделай такой себе на сайт

мне именно с ятуб каналла нужно, по ID добавлять так

html

   <iframe width="1280" height="720" id="player" src="http://www.youtube.com/embed/J32MrXDK6oI?version=3&enablejsapi=1" allowfullscreen></iframe>

но сам джава скрипт не хочет глушить видео на паузу при клике закрыть модельное окно

php

   <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>YouTube Player</title> </head> <body>    <input type="text" id="videoIdInput" placeholder="Введите ID видео">   <button onclick="loadVideo()">Загрузить видео</button>   <button onclick="playVideo()">Старт</button>   <button onclick="pauseVideo()">Стоп</button>   <div id="player"></div>    <script>     const apiKey = 'YOUR_API_KEY';     let player;      function onYouTubeIframeAPIReady() {       player = new YT.Player('player', {         height: '360',         width: '640',         videoId: 'VIDEO_ID',         playerVars: {           'autoplay': 0,           'controls': 1,           'rel': 0,           'showinfo': 0,           'iv_load_policy': 3,           'modestbranding': 1         },         events: {           'onReady': onPlayerReady,           'onStateChange': onPlayerStateChange         }       });     }      function onPlayerReady(event) {       // Можно добавить дополнительные действия при необходимости.     }      function onPlayerStateChange(event) {       // Можно добавить дополнительные действия при изменении состояния воспроизведения.     }      function loadVideo() {       const videoId = document.getElementById('videoIdInput').value;       player.loadVideoById(videoId);     }      function playVideo() {       player.playVideo();     }      function pauseVideo() {       player.pauseVideo();     }   </script>    <script src="https://www.youtube.com/iframe_api"></script>  </body> </html>

Серега , спс попробую

Пример

php

   <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>YouTube Player</title>   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">   <style>     body {       font-family: 'Arial', sans-serif;       background-color: #f8f9fa;       margin: 0;       padding: 0;     }      header {       background-color: #007bff;       color: #fff;       padding: 10px 0;       text-align: center;     }      footer {       background-color: #007bff;       color: #fff;       padding: 10px 0;       position: fixed;       bottom: 0;       width: 100%;       text-align: center;     }      #videoIdInput {       padding: 8px;       margin: 10px;     }      button {       padding: 10px;       margin: 5px;       font-size: 16px;       cursor: pointer;     }      #player {       margin: 20px auto;     }      .search-results {       margin-top: 20px;     }      .video-item {       margin-bottom: 10px;       cursor: pointer;     }      .video-item:hover {       background-color: #f0f0f0;     }   </style> </head> <body>    <header>     <h1>YouTube Player</h1>   </header>    <div class="container">     <div class="row">       <div class="col-md-6">         <input type="text" id="searchInput" class="form-control" placeholder="Поиск по названию видео">         <button onclick="searchVideo()" class="btn btn-primary">Искать</button>         <div class="search-results"></div>       </div>       <div class="col-md-6">         <input type="text" id="videoIdInput" class="form-control" placeholder="Введите ID видео">         <button onclick="loadVideo()" class="btn btn-primary">Загрузить видео</button>         <button onclick="togglePlayPause()" class="btn btn-success">Старт/Стоп</button>       </div>     </div>     <hr>     <div id="player"></div>   </div>    <footer>     &copy; 2024 YouTube Player   </footer>    <script src="https://www.youtube.com/iframe_api"></script>   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.1/dist/umd/popper.min.js"></script>   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>    <script>     const apiKey = 'YOUR_API_KEY';     let player;      function onYouTubeIframeAPIReady() {       player = new YT.Player('player', {         height: '360',         width: '640',         videoId: 'VIDEO_ID',         playerVars: {           'autoplay': 0,           'controls': 1,           'rel': 0,           'showinfo': 0,           'iv_load_policy': 3,           'modestbranding': 1         },         events: {           'onReady': onPlayerReady,           'onStateChange': onPlayerStateChange         }       });     }      function onPlayerReady(event) {       updateButtonState();     }      function onPlayerStateChange(event) {       updateButtonState();     }      function loadVideo(videoId) {       player.loadVideoById(videoId);     }      function togglePlayPause() {       if (player.getPlayerState() === YT.PlayerState.PLAYING) {         player.pauseVideo();       } else {         player.playVideo();       }       updateButtonState();     }      function updateButtonState() {       const playPauseButton = document.querySelector('button[onclick="togglePlayPause()"]');       if (player.getPlayerState() === YT.PlayerState.PLAYING) {         playPauseButton.textContent = 'Пауза';       } else {         playPauseButton.textContent = 'Старт';       }     }      function searchVideo() {       const searchQuery = document.getElementById('searchInput').value;       if (searchQuery.trim() !== '') {         fetch(`https://www.googleapis.com/youtube/v3/search?q=${searchQuery}&part=snippet&maxResults=5&type=video&key=${apiKey}`)           .then(response => response.json())           .then(data => displaySearchResults(data.items))           .catch(error => console.error('Error fetching search results:', error));       }     }      function displaySearchResults(results) {       const searchResultsContainer = document.querySelector('.search-results');       searchResultsContainer.innerHTML = '';        results.forEach(result => {         const videoId = result.id.videoId;         const title = result.snippet.title;          const videoItem = document.createElement('div');         videoItem.className = 'video-item';         videoItem.onclick = function() {           loadVideo(videoId);         };          const thumbnailUrl = result.snippet.thumbnails.medium.url;         videoItem.innerHTML = `           <img src="${thumbnailUrl}" alt="${title}" style="max-width: 100%;">           <p>${title}</p>         `;          searchResultsContainer.appendChild(videoItem);       });     }   </script>  </body> </html>

добавь свой апи ключ и пользуйся)