英文:
playing random new video when refreshing page
问题
我正在尝试创建一个只显示一个视频的网站（因为它应该在手机上打开），但是当刷新页面时，会出现一个随机的新视频。我有8个MP4视频（带有Dropbox链接），我想在刷新页面时让视频在这8个视频之间随机播放。希望这样说得清楚。
以下是我目前已经做的事情 - 不幸的是它还没有生效
我认为这可能与我使用的URL有关。
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="function.js"></script>
<title>未命名页面</title>
</head>
<body>
<video id="videoItem">
<source src="https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1" type="video/mp4" />
</video>
</body>
</html>
JavaScript:
// JavaScript Document
document.getElementById(videopage)
<script>
function getRandomInt(min, max) {
return Math.floor(Math.random() * array.length);
target = document.getElementById('videoItem');
var sources = video.getElementsByTagName('source');
var videoUrlsMp4=["https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1", "https://www.dropbox.com/s/qnmb9s5b0vho328/film%203.mp4?raw=1", "https://www.dropbox.com/s/ey4a07703h8henq/film%205.mp4?raw=1", "https://www.dropbox.com/s/et157quhjel6mcu/film%206.mp4?raw=1", "https://www.dropbox.com/s/e0nrb47fetotcsw/film%207.mp4?raw=1", "https://www.dropbox.com/s/npj70zhxzecs4lp/film%208.mp4?raw=1"];
var random_nr = getRandomInt(0, videoUrlsMp4.length-1);
sources[0].src = videoUrlsMp4[random_nr ];
video.load(); </script>
请注意，上述JavaScript代码存在一些错误，需要修复以使其正常工作。
英文:
I am trying to make a website with only one video displayed (covering the whole page because it's supposed to be opened with a phone). But when refreshing the page a random new video appears. I have 8 mp4 videos (with a dropbox link) and Im trying to get the video to randomise between these 8 videos when refreshing the page. I hope this makes sense.
Here is what I have done so far - it's not working unfortunately
I think it might have to do with the url I am using.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="function.js"></script>
<title>untitled page</title>
</head>
<body>
<video id="videoItem">
<source src="https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1" type="video/mp4" />
</video>
</body>
</html>
JavaScript:
// JavaScript Document
document.getElementById(videopage)
<script>
function getRandomInt(min, max) {
return Math.floor(Math.random() * array.length);
target = document.getElementById('videoItem');
var sources = video.getElementsByTagName('source');
var videoUrl=["https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1", "https://www.dropbox.com/s/qnmb9s5b0vho328/film%203.mp4?raw=1", "https://www.dropbox.com/s/ey4a07703h8henq/film%205.mp4?raw=1", "https://www.dropbox.com/s/et157quhjel6mcu/film%206.mp4?raw=1", "https://www.dropbox.com/s/e0nrb47fetotcsw/film%207.mp4?raw=1", "https://www.dropbox.com/s/npj70zhxzecs4lp/film%208.mp4?raw=1"];
var random_nr = getRandomInt(0, videoUrlsMp4.length-1);
sources[0].src = videoUrlsMp4[random_nr ];
video.load(); </script>
答案1
得分: 1
以下是一个在每次页面加载时加载新视频的最小实现。
请注意，您不需要一个<source>元素，相反，显示的解决方案会将src属性添加到<video>元素本身。
还请注意，我已将muted和playsinline属性添加到<video>元素，否则移动客户端可能会拒绝播放视频，因为它的加载没有由用户手势触发。
var videoEl = document.querySelector('#videoItem');
var videoUrls = [
"https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1",
"https://www.dropbox.com/s/qnmb9s5b0vho328/film%203.mp4?raw=1",
"https://www.dropbox.com/s/ey4a07703h8henq/film%205.mp4?raw=1",
"https://www.dropbox.com/s/et157quhjel6mcu/film%206.mp4?raw=1",
"https://www.dropbox.com/s/e0nrb47fetotcsw/film%207.mp4?raw=1",
"https://www.dropbox.com/s/npj70zhxzecs4lp/film%208.mp4?raw=1"
];
videoEl.addEventListener('canplay', function () {
videoEl.play();
});
videoEl.src = videoUrls[Math.floor(Math.random() * videoUrls.length)];
<video id="videoItem" src="https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1" muted playsinline>
</video>
英文:
Below is a minimal implementation that loads a new video on every page load.
Note that you do not need a <source>-element, instead the shown solution adds a src-attribute to the <video>-element itself.
Also note that I have added the muted and playsinline attributes to the <video>-element, otherwise mobile clients may/will refuse to play the video since loading it wasn't triggered by a user gesture.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var videoEl = document.querySelector('#videoItem');
var videoUrls = [
"https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1",
"https://www.dropbox.com/s/qnmb9s5b0vho328/film%203.mp4?raw=1",
"https://www.dropbox.com/s/ey4a07703h8henq/film%205.mp4?raw=1",
"https://www.dropbox.com/s/et157quhjel6mcu/film%206.mp4?raw=1",
"https://www.dropbox.com/s/e0nrb47fetotcsw/film%207.mp4?raw=1",
"https://www.dropbox.com/s/npj70zhxzecs4lp/film%208.mp4?raw=1"
];
videoEl.addEventListener('canplay', function () {
videoEl.play();
});
videoEl.src = videoUrls[Math.floor(Math.random() * videoUrls.length)];
<!-- language: lang-html -->
<video id="videoItem" src="https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1" muted playsinline>
</video>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论