Youtube玩家Api Get截屏
Youtube玩家Api Get截屏
提问于 2019-05-24 22:03:40
有一个iframe on 此页，我想从video标签中得到一个截图，所以我必须到达iframe标签中的视频标记。
当我打开控制台并运行以下代码时：
const videoElement = document.getElementsByTagName('iframe')[0]
.contentWindow.document.getElementsByTagName('video')[0];
//Extracting picture from video tag
const canvas = document.createElement('canvas');
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height);引发了此错误：
Uncaught DOMException: Blocked a frame with origin "https://developers.google.com" from accessing a cross-origin frame.
at <anonymous>:1:57另外，我检查了这的问题
我的问题是如何从YouTube Player API获得屏幕截图？
回答 1
Stack Overflow用户
发布于 2019-11-13 11:28:50
据我所知，没有办法从YouTube Player API中获取屏幕快照，因为它是基于iFrame的。如果您想在自己的应用程序(不仅仅是一个浏览器扩展)中进行这些操作，这个操作将被CORS所禁止(导致异常的原因)。
唯一的解决办法是使用可以从YouTube获得的数据将YouTube视频作为源放入视频HTML元素中。这段代码应该可以方便地获取视频的源urls：
class YoutubeVideo {
constructor(video_id, callback) {
return (async () => {
// You should also redirect those requests
// through your own API that would permit CORS
const response = await fetch(`https://www.youtube.com/get_video_info?video_id=${video_id}`, {
headers: { 'Content-Type' : 'text/plain'}
});
const video_info = await response.text();
let video = this.decodeQueryString(video_info);
if (video.status === 'fail') {
return callback(video);
}
if (video.url_encoded_fmt_stream_map)
video.source = this.decodeStreamMap(video.url_encoded_fmt_stream_map);
return callback(video);
})();
}
decodeQueryString(queryString) {
var key, keyValPair, keyValPairs, r, val, _i, _len;
r = {};
keyValPairs = queryString.split("&");
for (_i = 0, _len = keyValPairs.length; _i < _len; _i++) {
keyValPair = keyValPairs[_i];
key = decodeURIComponent(keyValPair.split("=")[0]);
val = decodeURIComponent(keyValPair.split("=")[1] || "");
r[key] = val;
}
return r;
}
decodeStreamMap(url_encoded_fmt_stream_map) {
var quality, sources, stream, type, urlEncodedStream, _i, _len, _ref;
sources = {};
_ref = url_encoded_fmt_stream_map.split(",");
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
urlEncodedStream = _ref[_i];
stream = this.decodeQueryString(urlEncodedStream);
type = stream.type.split(";")[0];
quality = stream.quality.split(",")[0];
stream.original_url = stream.url;
stream.url = "" + stream.url + "&signature=" + stream.sig;
sources["" + type + " " + quality] = stream;
}
return sources;
}
}
传递给构造函数中回调的对象将具有源属性，该属性包含所有可用视频类型和质量的源链接，您可以在浏览器的控制台上更好地检查它们。尽管如此，并不是所有的YouTube视频都可以这样处理，我遇到的文件都有进一步的限制，而您所能得到的只有被禁止的错误或空源。
帮助我找到解决方案的资源：https://github.com/endlesshack/youtube-video
基于此解决方案工作的资源：http://youtubescreenshot.com/
基于https://github.com/RinSer/YouCut服务器的概念简单Web应用的证明
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56299995
复制相关文章
相似问题
腾讯云开发者
