使用 Javascript 在頁面加載時隨機化背景視頻
[英]Use Javascript to randomize background video on page load
問題描述
我想在頁面加載時隨機加載視頻。 我在本地存儲了三個視頻，我想在它們之間交替，但除了第一個播放之外，似乎找不到其他任何視頻。 我對 Javascript 非常陌生，對需要修復的內容非常迷茫......感謝您的幫助！
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
var videoStorage = [
'/vid/background-video-1.mp4',
'/vid/background-video-2.mp4',
'/vid/background-video-3.mp4'
],
video = document.querySelector('video'),
activeVideoUrl = videoStorage[Math.round(Math.random() * (videoStorage.length - 1))];
</script>
</head>
<body>
<div class="overlay">
<video autoplay muted loop id="background-video">
<source src="/vid/background-video-1.mp4" type="video/mp4">
<source src="/vid/background-video-2.mp4" type="video/mp4">
<source src="/vid/background-video-3.mp4" type="video/mp4">
</video></div>
3 個解決方案
解決方案1
1 2020-07-21 18:22:16
您的activeVideoUrl僅在頁面加載時設置一次。 嘗試使用setInterval更新activeVideoUrl的值。
解決方案2
0 2020-07-21 18:34:35
您必須從此activeVideoUrl隨機選擇url設置src ，您可以設置視頻type和play ，
你可以試試這個
var videoStorage = [ 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4', 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4' ], video = document.querySelector('#background-video'); // DEFAULT PLAY ON PAGE LOAD randomPlay(); // RANDOM PLAY FUNCTION function randomPlay(){ let activeVideoUrl = videoStorage[ Math.round(Math.random() * (videoStorage.length - 1)) ]; video.type = "video/mp4"; video.src = activeVideoUrl; video.play(); }
<button onClick="randomPlay()">Random Play</button> <div class="overlay"> <video autoplay muted loop id="background-video" height="150px"></video> </div>
解決方案3
0 2020-07-22 17:37:13
需要添加document.addEventListener("DOMContentLoaded", function ()
document.addEventListener("DOMContentLoaded", function () {
var videoStorage = [
'/vid/background-video-1.mp4',
'/vid/background-video-2.mp4',
'/vid/background-video-3.mp4'
],
video = document.querySelector('#background-video'),
activeVideoUrl = videoStorage[
Math.floor(Math.random() * (videoStorage.length))
];
video.type = "video/mp4";
video.src = activeVideoUrl;
});
</script>```
如何在點擊和頁面加載時隨機分配視頻
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.