我有a website它播放了我击球发球的视频(来自 youtube)。我希望每次用户单击页面时都会加载一个新的服务视频。我已经使用某人的出色作品播放了视频，其中 YouTube 视频 ID 是一个 JavaScript 变量。因此，现在我需要安装一个函数，在单击屏幕时，该变量会(随机)更新，并再次运行原始函数(播放视频)，从而更改浏览器中播放的视频。
我的计划如下:
- 创建一个包含所有 YouTube ID 的数组(完成)
- 创建一个函数，随机选择一个 YouTube ID(完成)
- 创建一个函数，当用户点击屏幕时，将原始变量(保存原始 YouTube ID)更改为新的 YouTube ID，然后再次运行原始函数，从而更改屏幕上的视频
我完全无法理解，因为我刚刚开始使用 JS，但我认为一定有办法做到这一点。提前感谢您的帮助。我的代码如下:
JS:
var vid = "FY-wHOEmwpI",
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('Something went wrong with these serve vids.');
}
});
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;
}, {});
}
// okay let's try this shit
var youtubeIDs = [
"ise3CHsOwtU",
"4s18eq0wqdo",
"1W_KlkqnbF4"];
openStuff = function () {
// get a random number between 0 and the number of links
var randIdx = Math.random() * youtubeIDs.length;
// round it, so it can be used as array index
randIdx = parseInt(randIdx, 10);
// construct the link to be opened
var vid = youtubeIDs[randIdx];
};
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="servevids.css">
<title>Serve Vids</title>
</head>
<body>
<video loop muted autoplay playsinline id="video"></video>
<pre></pre>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="servevids.js" type="text/javascript"></script>
</body>
</html>
CSS:
html, body {
height: 100%;
min-height: 100%;
background: #444;
overflow: hidden;
}
video {
object-fit: cover;
width:100%;
height:100%;
}
pre {
padding: 1em;
color: red;
}
最佳答案
var randIdx = Math.random() * youtubeIDs.length;
//将其四舍五入，因此可以用作数组索引
randIdx = parseInt(randIdx, 10);
//构造要打开的链接
randIdx 返回 0
应该是
randidx = Math.floor(Math.random() * youtubeIDs.length + 1);
var vid = youtubeIDs[randIdx];
关于javascript - 如何用 Javascript/jQuery 替换变量(并使用新变量刷新网站？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48876287/