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)
Скачиваний: 91

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>

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