Question

我正在使用以下解决方案将YouTube视频用作网站div背景：https://stackoverflow.com/a/45377998

JSFiddle示例可在https://jsfiddle.net/350D/uq1vvavf/中找到

我目前遇到的问题是不会显示所有视频。例如，JSFiddle中的视频正常工作（https://www.youtube.com/watch?v=R3AKlscrjmQ）。但是，例如，该视频不起作用：https://www.youtube.com/watch?v=V5YOhcAof8I

我怀疑这可能与信号格式（720p，360p等）有关。我尝试调试该问题，发现在流数组中仍返回无效YouTube视频的链接（就像正常视频一样）。感谢您提出解决问题的任何提示。

HTML：

<video loop muted autoplay playsinline id="video"></video>
<pre></pre>

JS：

var vid = "R3AKlscrjmQ",
streams,
video_focused = true,
video_tag = $("#video"),
video_obj = video_tag.get(0);
$.getJSON("https://query.yahooapis.com/v1/public/yql", {
q: "select * from csv where     url='https://www.youtube.com/get_video_info?video_id=" + vid + "'",
format: "json"
}, function(data) {
if (data.query.results && !data.query.results.row.length) {
    streams = parse_youtube_meta(data.query.results.row.col0);
    video_tag.attr({
        src: streams['1080p'] || streams['720p'] || streams['360p']
    });

    document.addEventListener("visibilitychange", function() {
        video_focused = !video_focused ? video_obj.play() : video_obj.pause();
    });
} else {
        $('pre').text('YQL request error...');
}
});

function parse_youtube_meta(rawdata) {
var data = parse_str(rawdata),
    streams = (data.url_encoded_fmt_stream_map + ',' + data.adaptive_fmts).split(','),
    result = {};
$.each(streams, function(n, s) {
    var stream = parse_str(s),
        itag = stream.itag * 1,
        quality = false,
        itag_map = {
            18: '360p',
            22: '720p',
            37: '1080p',
            38: '3072p',
            82: '360p3d',
            83: '480p3d',
            84: '720p3d',
            85: '1080p3d',
            133: '240pna',
            134: '360pna',
            135: '480pna',
            136: '720pna',
            137: '1080pna',
            264: '1440pna',
            298: '720p60',
            299: '1080p60na',
            160: '144pna',
            139: "48kbps",
            140: "128kbps",
            141: "256kbps"
        };
    //if (stream.type.indexOf('o/mp4') > 0) console.log(stream);
    if (itag_map[itag]) result[itag_map[itag]] = stream.url;
});
return result;
};

function parse_str(str) {
return str.split('&').reduce(function(params, param) {
    var paramSplit = param.split('=').map(function(value) {
        return decodeURIComponent(value.replace('+', ' '));
    });
    params[paramSplit[0]] = paramSplit[1];
    return params;
}, {});
}

Answer 1

作为一种解决方法，由于Henri Peetsmann，我使用了以下解决方案https://codepen.io/henripeetsmann/pen/KpVVLq。对我来说，即使将URL从Youtube更改为一个，它也能正常工作。使用Youtube的唯一缺点是，暂停时您现在无法隐藏相关视频。所以我不得不用其他东西来覆盖这部分。

HTML

<div class="videobg">
  <div class="videobg-width">
    <div class="videobg-aspect">
      <div class="videobg-make-height">
        <div class="videobg-hide-controls">
            <iframe src="https://player.vimeo.com/video/8970192?autoplay=1&loop=1&title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

/* Quick reset */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Make elements as high as viewport */

html {
  height: 100%;
}

body {
  position: relative;
  height: 100%;
}

/* Video background */

.videobg {
  position: relative;
  width: 100%; /* Set video container element width here */
  height: 100%; /* Set video container element height here */
  overflow: hidden;
  background: #111; /* bg color, if video is not high enough */
}

/* horizontally center the video */
.videobg-width {
  position: absolute;
  width: 100%; /* Change width value to cover more area*/
  height: 100%;
  left: -9999px;
  right: -9999px;
  margin: auto;
}

/* set video aspect ratio and vertically center */
.videobg-aspect {
  position: absolute;
  width: 100%;
  height: 0;
  top: -9999px;
  bottom: -9999px;
  margin: auto;
  padding-bottom: 56.25%; /* 16:9 ratio */
  overflow: hidden;

}

.videobg-make-height {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.videobg-hide-controls {
  box-sizing: content-box;
  position: relative;
  height: 100%;
  width: 100%;
  /* Vimeo timeline and play button are ~55px high */
  padding: 55px 97.7777px; /* 16:9 ratio */
  top: -55px; 
  left: -97.7777px; /* 16:9 ratio */
}

.videobg iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 0 none;
}

jQuery

var timeoutId;
var $videoBgAspect = $(".videobg-aspect");
var $videoBgWidth = $(".videobg-width");
var videoAspect = $videoBgAspect.outerHeight() / $videoBgAspect.outerWidth();

function videobgEnlarge() {
  console.log('resize');
  windowAspect = ($(window).height() / $(window).width());
  if (windowAspect > videoAspect) {
    $videoBgWidth.width((windowAspect / videoAspect) * 100 + '%');
  } else {
    $videoBgWidth.width(100 + "%")
  }
}

$(window).resize(function() {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(videobgEnlarge, 100);
});

$(function() {
  videobgEnlarge();
});

YouTube视频作为div背景不适用于所有视频

1 个答案: