mardi 15 décembre 2020

Can you display random images AND videos in one array upon page load?

I am trying to create a page that loads images AND videos randomly via an array upon load. Is this possible? I've been trying to find some code for this and have not come across it.

My JS looks like this:

<script type="text/javascript">

var random_images_array = ['light.jpg', 'dark.jpg', 'photo.jpg', 'video_1.mp4'];
    
function getRandomImage(imgAr, path) {
    path = path || 'images/'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    var imgStr = '<img src="' + path + img + '" alt = "">';
    document.write(imgStr); document.close();
}

</script>

And my HTML looks like this:

<body>
    
<div>
    <!-- This script segment displays an image from the array -->
    <script type="text/javascript">getRandomImage(random_images_array, 'images/')</script>
</div>

</body>

I'm just a little lost on what I need to add to my JS in order to make this work - can I add a video to my array? or is it something I should change/add to my HTML (perhaps a video tag?)

Photos work fine and load randomly on load, video does not appear when it is chosen on random from array.

Any help would be appreciated!




Aucun commentaire:

Enregistrer un commentaire