Question

我正在使用Youtube Player API创建youtube视频的视频背景。我已经可以播放视频了，但是我很好奇是否有人对视频结束后如何停止后台缓冲有任何想法。我想在视频结束时自动重新开始而无需缓冲。有人有做这项工作的经验吗？

这是我的js代码：

function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('YouTubeBackgroundVideoPlayer', {
      videoId: 'LEOM8H95tyU', // YouTube Video ID
      width: 1280,               // Player width (in px)
      height: 720,              // Player height (in px)
      playerVars: {
        playlist: 'LEOM8H95tyU',
          autoplay: 1,        // Auto-play the video on load
          autohide: 1,
          disablekb: 1, 
          controls: 0,        // Hide pause/play buttons in player
          showinfo: 0,        // Hide the video title
          modestbranding: 1,  // Hide the Youtube Logo
          loop: 1,            // Run the video in a loop
          fs: 0,              // Hide the full screen button
          autohide: 0,         // Hide video controls when playing
          rel: 0,
          enablejsapi: 1
      },
      events: {
        onReady: function(e) {
            e.target.mute();
            e.target.setPlaybackQuality('hd1080');
        },
        onStateChange: function(e) {
          if(e && e.data === 1){
              var videoHolder = document.getElementById('home-banner-box');
              if(videoHolder && videoHolder.id){
                videoHolder.classList.remove('loading');
              }
          }else if(e && e.data === 0){
            e.target.playVideo()
          }
        }
      }
  });
}

这是我的HTML代码：

<section id="home-banner-box" class="home-banner loading">
    <div class="image video-slide" style="background-image: url($ImageURL)">
        <div class="video-background">
            <div class="video-foreground" id="YouTubeBackgroundVideoPlayer">
            </div>
        </div>
    </div>
</section>

这是我的CSS代码：

.home-banner .slide .video-slide {
  background-color: #000; }

.home-banner.loading .video-background {
  opacity: 0; }

.video-background {
  position: absolute;
  top: 50%;
  left: 0;
  padding-top: 56.25%;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: 2s opacity ease;
  transition: 2s opacity ease;
  opacity: 1; }

.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; }

以下是我面临的问题的链接：https://geniecast.com/autoplay-video-test/

YouTube背景视频停止刷新

0 个答案: