刷新页面时播放随机新视频

huangapple
go评论93阅读模式
英文:

playing random new video when refreshing page

问题

我正在尝试创建一个只显示一个视频的网站（因为它应该在手机上打开），但是当刷新页面时，会出现一个随机的新视频。我有8个MP4视频（带有Dropbox链接），我想在刷新页面时让视频在这8个视频之间随机播放。希望这样说得清楚。

以下是我目前已经做的事情 - 不幸的是它还没有生效

我认为这可能与我使用的URL有关。

HTML:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5.     <script src="function.js"></script>
  6. <title>未命名页面</title>
  7. </head>
  8. <body>
  9.     <video id="videoItem">
  10.     <source src="https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1" type="video/mp4" />
  11.  
  12. </video>
  13. </body>
  14. </html>

JavaScript:

  1. // JavaScript Document
  2. document.getElementById(videopage)
  3. <script> 
  4. function getRandomInt(min, max) {         
  5. return Math.floor(Math.random() * array.length);
  6.  	target = document.getElementById('videoItem');
  7.      var sources = video.getElementsByTagName('source');
  8.      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"];
  9.      var random_nr = getRandomInt(0, videoUrlsMp4.length-1);
  10.      sources[0].src = videoUrlsMp4[random_nr ];
  11.      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:

  1. &lt;!doctype html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. 	&lt;script src=&quot;function.js&quot;&gt;&lt;/script&gt;
  6. &lt;title&gt;untitled page&lt;/title&gt;
  7. &lt;/head&gt;
  8. &lt;body&gt;
  9. 	&lt;video id=&quot;videoItem&quot;&gt;
  10.     &lt;source src=&quot;https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1&quot; type=&quot;video/mp4&quot; /&gt;
  11.  
  12. &lt;/video&gt;
  13. &lt;/body&gt;
  14. &lt;/html&gt;

JavaScript:

  1. // JavaScript Document
  2. document.getElementById(videopage)
  3. &lt;script&gt; 
  4. function getRandomInt(min, max) {         
  5. return Math.floor(Math.random() * array.length);
  6.  	target = document.getElementById(&#39;videoItem&#39;);
  7.      var sources = video.getElementsByTagName(&#39;source&#39;);
  8.      var videoUrl=[&quot;https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1&quot;, &quot;https://www.dropbox.com/s/qnmb9s5b0vho328/film%203.mp4?raw=1&quot;, &quot;https://www.dropbox.com/s/ey4a07703h8henq/film%205.mp4?raw=1&quot;, &quot;https://www.dropbox.com/s/et157quhjel6mcu/film%206.mp4?raw=1&quot;, &quot;https://www.dropbox.com/s/e0nrb47fetotcsw/film%207.mp4?raw=1&quot;, &quot;https://www.dropbox.com/s/npj70zhxzecs4lp/film%208.mp4?raw=1&quot;];
  9.      var random_nr = getRandomInt(0, videoUrlsMp4.length-1);
  10.      sources[0].src = videoUrlsMp4[random_nr ];
  11.      video.load(); &lt;/script&gt;

答案1

得分: 1

以下是一个在每次页面加载时加载新视频的最小实现。

请注意，您不需要一个&lt;source&gt;元素，相反，显示的解决方案会将src属性添加到&lt;video&gt;元素本身。

还请注意，我已将muted和playsinline属性添加到&lt;video&gt;元素，否则移动客户端可能会拒绝播放视频，因为它的加载没有由用户手势触发。

  1. var videoEl = document.querySelector('#videoItem');
  3. var videoUrls = [
  4.   "https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1", 
  5.   "https://www.dropbox.com/s/qnmb9s5b0vho328/film%203.mp4?raw=1", 
  6.   "https://www.dropbox.com/s/ey4a07703h8henq/film%205.mp4?raw=1", 
  7.   "https://www.dropbox.com/s/et157quhjel6mcu/film%206.mp4?raw=1", 
  8.   "https://www.dropbox.com/s/e0nrb47fetotcsw/film%207.mp4?raw=1", 
  9.   "https://www.dropbox.com/s/npj70zhxzecs4lp/film%208.mp4?raw=1"
  10. ];
  12. videoEl.addEventListener('canplay', function () {
  13.   videoEl.play();
  14. });
  16. videoEl.src = videoUrls[Math.floor(Math.random() * videoUrls.length)];
  1. <video id="videoItem" src="https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1" muted playsinline>
  2. </video>
英文:

Below is a minimal implementation that loads a new video on every page load.

Note that you do not need a &lt;source&gt;-element, instead the shown solution adds a src-attribute to the &lt;video&gt;-element itself.

Also note that I have added the muted and playsinline attributes to the &lt;video&gt;-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 -->

  1. var videoEl = document.querySelector(&#39;#videoItem&#39;);
  3. var videoUrls = [
  4.   &quot;https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1&quot;, 
  5.   &quot;https://www.dropbox.com/s/qnmb9s5b0vho328/film%203.mp4?raw=1&quot;, 
  6.   &quot;https://www.dropbox.com/s/ey4a07703h8henq/film%205.mp4?raw=1&quot;, 
  7.   &quot;https://www.dropbox.com/s/et157quhjel6mcu/film%206.mp4?raw=1&quot;, 
  8.   &quot;https://www.dropbox.com/s/e0nrb47fetotcsw/film%207.mp4?raw=1&quot;, 
  9.   &quot;https://www.dropbox.com/s/npj70zhxzecs4lp/film%208.mp4?raw=1&quot;
  10. ];
  13. videoEl.addEventListener(&#39;canplay&#39;, function () {
  14.   videoEl.play();
  15. });
  17. videoEl.src = videoUrls[Math.floor(Math.random() * videoUrls.length)];

<!-- language: lang-html -->

  1. &lt;video id=&quot;videoItem&quot; src=&quot;https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1&quot; muted playsinline&gt;
  2. &lt;/video&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月6日 19:59:34
  • 转载请务必保留本文链接：https://go.coder-hub.com/76628599.html
  • arrays
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定