Как реализовать рандомное видио при обновлении страницы, все видио сохранены в папке videos, от туда они должны рандомно запускаться
Скрипт ниже, он запускает только одно видио!
<div class="video-fallback"></div>
<video id="video" onloadstart="this.volume=0.3" loop>
<source src="videos/bzytop.mp4" type="video/mp4"/>
</video>
Есть js скрипт он работает только после нажатия на Посмотреть другое видео
<i onclick="refresh();" class="brefreshbutton fa fa-refresh" title="Посмотреть другое видео"></i>
Сам js скрипт с рандомным воспроизведении видио
var $=jQuery.noConflict();jQuery(function($){
$("#bubble").each(function(){$(".cover").pobubble({color:"#ffffff",ammount:10,min:.1,max:.2,time:60,vertical:true,horizontal:true,style:'circle'});});$("#snow").each(function(){posnow();});$("#star").each(function(){postars($('.cover')[0]).init();});
$(".video").each(function(){$(".stop-button").click(function(){$(".stop-button").toggleClass('fa-play').toggleClass('fa-pause');
var videoBG=document.getElementById("video");if(videoBG.paused)
videoBG.play();else videoBG.pause();});
$(".volume-button").click(function(){$(".volume-button").toggleClass('fa-volume-off').toggleClass('fa-volume-up');$("video").prop('muted',!$("video").prop('muted'));});});});
function refresh(){
var count = Math.floor(Math.random() * videoArray.length);
document.getElementsByTagName('source')[0].src = "/videos/" + videoArray[count];video.load();}
var videoArray = ["1.mp4","2.mp4","3.mp4","4.mp4","5.mp4","6.mp4","7.mp4","8.mp4","9.mp4","10.mp4","11.mp4"];
Помогите пожалуйста
