Два видео Youtube в формате HTML5 на одной странице — Google Image proxy
Я использую 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.info(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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>Вы дважды вызываете свою функцию, и параметры передаются вручную. Мое решение принимает массив объектов один раз. Массив объектов находится в одном шаге от JSON, который, конечно же, является наиболее распространенным способом передачи данных tx/rx, таких как настройки YT. Тем не менее, он может показаться менее аккуратным, но его дизайн должен быть общим и работать с кодом и целями, которые вы сами опубликовали. В любом случае удачи с этим.
Извините, я не могу заставить ваш пример работать - фрагмент кода тоже ничего не показывает. Пример, который я нашел ниже, работает, хотя, возможно, это не лучший способ - если вы считаете, что ваш ответ лучше, не могли бы вы помочь мне заставить ваш пример работать?
Я никогда не тестировал его и никогда не говорил, что он лучше, я объяснил разницу между ними. Я не тестирую видео на своем телефоне, это пустая трата денег. Если вы планируете регулярно и/или массово обновлять видеоконтент, вам следует пойти по этому пути. Если вам просто нужно несколько видео, которые вы не планируете менять в ближайшее время, у вас все в порядке.
В итоге я нашел ответ, который работал очень хорошо и был достаточно аккуратным, чтобы я мог продолжать добавлять больше видео, если мне нужно.
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.info(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.info(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>
Я нашел более аккуратный ответ (который я разместил ниже), который просто позволяет вам объявить настройку один раз, а затем продолжать добавлять идентификаторы видео вверху. :-) Спасибо, в любом случае!