一页上有两个 Youtube 视频作为 HTML5 视频 - Google 图片代理

Question

我正在使用this js 代码导入 Youtube 视频并输出为 HTML5。效果很好，但我想在一页上有 2 个视频 - 有没有办法操纵此代码让 2 个视频具有不同的 ID？

我尝试复制代码并更改 ID，但它只显示最后一个（显然），因为它使用相同的方法。我并没有完全理解这个功能，所以任何关于我哪里出错的答案的解释都会很棒！

这是我试图从链接问题的代码中改编的内容：

var vid = "R3AKlscrjmQ",
  streams,
  video_focused = true,
  video_tag = $("#video"),
  video_obj = video_tag.get(0);
$.get("https://images" + ~~(Math.random() * 33) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget_video_info%3Fvideo_id%3D" + vid, function(data) {
  if (data) {
    streams = parse_youtube_meta(data);
    video_tag.attr({
      src: streams['1080p'] || streams['720p'] || streams['360p']
    });

    document.addEventListener("visibilitychange", function() {
      video_focused = !video_focused ? video_obj.play() : video_obj.pause();
    });
  }
});

var vid2 = "R3AKlscrjmQ",
  streams,
  video_focused = true,
  video_tag = $("#video2"),
  video_obj = video_tag.get(0);
$.get("https://images" + ~~(Math.random() * 33) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget_video_info%3Fvideo_id%3D" + vid2, function(data) {
  if (data) {
    streams = parse_youtube_meta(data);
    video_tag.attr({
      src: streams['1080p'] || streams['720p'] || streams['360p']
    });

    document.addEventListener("visibilitychange", function() {
      video_focused = !video_focused ? video_obj.play() : video_obj.pause();
    });
  }
});




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;
  }, {});
}

.video-container {
  height: 200px;
  background: orange;
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="video-container">
  <video loop muted autoplay playsinline id="video"></video>
</div>

<div class="video-container">
  <video loop muted autoplay playsinline id="video2"></video>
</div>

Answer 1

我最终找到了一个非常有效的答案，并且足够整洁，可以让我在需要时继续添加更多视频。

setupVideo("ScMzIvxBSi4", $('#video'));
setupVideo("ni5hRK1ehzk", $('#video2'));

function setupVideo(videoId, selectorElement) {
  var vid = videoId,
    streams,
    video_focused = true,
    video_tag = selectorElement,
    video_obj = video_tag.get(0);
  $.get("https://images" + ~~(Math.random() * 33) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget_video_info%3Fvideo_id%3D" + vid, function(data) {
    console.log(data);
    if (data) {
      streams = parse_youtube_meta(data);
      video_tag.attr({
        src: streams['1080p'] || streams['720p'] || streams['360p']
      });

      document.addEventListener("visibilitychange", function() {
        video_focused = !video_focused ? video_obj.play() : video_obj.pause();
      });
    }
  });
}

function parse_youtube_meta(rawdata) {
  var data = parse_str(rawdata),
    streams = (data.url_encoded_fmt_stream_map + ',' + data.adaptive_fmts).split(','),
    result = {};
  streams.forEach(function(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;
  }, {});
}

.video-container {
  overflow: hidden;
  width: 50%;
  float: left;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="video-container">
  <video loop muted autoplay playsinline id="video"></video>
</div>

<div class="video-container">
  <video loop muted autoplay playsinline id="video2"></video>
</div>

Answer 2

你需要一个不同的video_id——现在它们是video_id: "R3AKlscrjmQ"的重复。所有视频变量都作为属性分配给对象。这些对象位于vidArray。第一个函数已修改为循环运行并设置与每个对象形式 vidArray 关联的视频。为了混乱起见，最后两个函数被省略了，但记得在测试之前包含它们。

var streams;

var vidArray = [{
  video_id: "R3AKlscrjmQ",
  video_tag: $("#video0"),
  video_focused: true,
  video_obj: document.getElementById("video0")
}, {
  video_id: "?",
  video_tag: $("#video1"),
  video_focused: true,
  video_obj: document.getElementById("video1")
}];

var idx;

for (idx = 0; idx < vidArray.length; idx++) {
  $.get("https://images" + ~~(Math.random() * 33) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https%3A%2F%2Fwww.youtube.com%2Fget_video_info%3Fvideo_id%3D" + vidArray[idx].video_id, function(data) {
    if (data) {
      streams = parse_youtube_meta(data);
      vidArray[idx].video_tag.attr({
        src: streams['1080p'] || streams['720p'] || streams['360p']
      });

      vidArray[idx].video_obj.addEventListener("visibilitychange", function(e, idx) {
        vidArray[idx].video_focused = !vidArray[idx].video_focused ? vidArray[idx].video_obj.play() : vidArray[idx].video_obj.pause();
      });
    }
  });
}

.video-page {
  height: 100vh;
  background: orange;
  overflow: hidden;
}

video {
  margin: 50vh auto;
  width: 100%;
  height: auto;
  object-fit: cover;
}

<div class="video-page">
  <video loop muted autoplay playsinline id="video0"></video>
</div>
<div class="video-page">
  <video loop muted autoplay playsinline id="video1"></video>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>