Два Youtube видео в виде HTML5 видео на одной странице - прокси Google Image

Question

Я использую этот js-код для импорта видео с YouTube и вывода в формате HTML5.Это прекрасно работает, но я хотел бы иметь 2 видео на одной странице - есть ли способ манипулировать этим кодом, чтобы иметь 2 видео для разных идентификаторов?

Я попытался дублировать код и изменить идентификаторы,но он просто отображает последний (очевидно), потому что он использует тот же метод.Я не совсем понимаю функцию полностью, поэтому любое объяснение в ответах о том, где я ошибся, было бы замечательно!

Это то, что я пытался адаптировать из кода связанного вопроса:

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>