Как добавить автовоспроизведение и цикл в видео Youtube на HTML? - PullRequest
0 голосов
/ 20 сентября 2018

У меня проблемы с добавлением автозапуска к видео, которое я хочу разместить на своем HTML-сайте.Добавление? Autoplay = 1 или & autoplay = 1 не сработало.- то же самое с петлей

<div class="videoContainer">
    <iframe class="videoContainer__video" width="560" height="315" src="https://www.youtube.com/embed/HWl8XAOQnTg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe>
</div>

Ответы [ 3 ]

0 голосов
/ 20 сентября 2018

Здесь используйте это: ОТКРЫТЬ ССЫЛКУ НИЖЕГО КОДА Это также зациклит ваше видео: (Запускает кэшированную версию видео, посмотрите @Turnip Comment)

; & autoplay = 1; & loop = 1; & playlist = HWl8XAOQnTg

https://codepen.io/GAUTAMRAJU15/pen/MqLJRa

<iframe class="videoContainer__video" width="560" height="315"     src="https://www.youtube.com/embed/HWl8XAOQnTg?rel=0&amp;&amp;showinfo=0;&autoplay=1;&loop=1;&playlist=HWl8XAOQnTg"> </iframe> 
0 голосов
/ 21 сентября 2018

Не полагаясь на параметры, которые мне не подходят - рабочий обходной путь на сентябрь 2018 года (бонус: установите ширину и высоту с помощью CSS для #yt-wrap вместо жесткого кодирования в JS):

<div id="yt-wrap">
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="ytplayer"></div>
</div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      width: '100%',
      height: '100%',
      videoId: 'VIDEO_ID',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
    player.mute(); // comment out if you don't want the auto played video muted
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.seekTo(0);
      player.playVideo();
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>
0 голосов
/ 20 сентября 2018

Здравствуйте, мой друг, вы можете найти правильные шаги для правильного встраивания видео на YouTube;

  1. На компьютере перейдите к видео YouTube, которое вы хотите встроить.
  2. Поднажмите кнопку «Поделиться».
  3. Нажмите «Встроить».
  4. В появившемся окне скопируйте код HTML.
  5. Вставьте код в HTML-код своего блога или веб-сайта.

Чтобы разрешить автоматическое воспроизведение видео, используйте src="https://www.youtube.com/embed/HWl8XAOQnTg?rel=0&amp;controls=0&amp;showinfo=0;autoplay=1&mute=1", а также код allow="autoplay; encrypted-media".Воспользуйтесь приведенными выше инструкциями, чтобы сначала вставить видео на YouTube, а затем добавить autoplay=1 к URL-адресу видео.

Я знаю, что вы уже говорили, что пытались добавить autoplay=1, но это может помочь вам повторить попытку.следуя моим шагам.Дайте мне знать, как вы поживаете.

...