CODEWITHSUNDEEP
phparrayshtmlvideohtml5-video
mdcrtv
mdcrtv

Reputation: 143

I need a way to play a series of videos randomly

Right now, I've got a chunk of code that will load one of three videos -- The random play order is in the video itself.

In the code below, I'm dealing with only three videos, given all possibilities, that makes for around six possibilities when the page loads. I'll be dealing with around 12 videos on the final site and this method won't cut it given the time it would take to build each possibility (114 videos)...

Anyways, here's my code:

<div id="video_container">
    <div id="video">
        <video width="1060" height="596" autoplay="autoplay" loop="loop" muted="muted">

            <? $videolink = get_template_directory_uri() . "/videos/";

            $videos = array(

            ' <source src="' . $videolink . 'test-123.mp4" type="video/mp4">
            <source src="' . $videolink . 'test-123.webm" type="video/webm">
            <source src="' . $videolink . 'test-123.ogv" type="video/ogg">
            ',

            ' <source src="' . $videolink . 'test-132.mp4" type="video/mp4">
            <source src="' . $videolink . 'test-132.webm" type="video/webm">
            <source src="' . $videolink . 'test-132.ogv" type="video/ogg">
            ',

            ' <source src="' . $videolink . 'test-213.mp4" type="video/mp4">
            <source src="' . $videolink . 'test-213.webm" type="video/webm">
            <source src="' . $videolink . 'test-213.ogv" type="video/ogg">
            ',

            ' <source src="' . $videolink . 'test-231.mp4" type="video/mp4">
            <source src="' . $videolink . 'test-231.webm" type="video/webm">
            <source src="' . $videolink . 'test-231.ogv" type="video/ogg">
            ',

            ' <source src="' . $videolink . 'test-312.mp4" type="video/mp4">
            <source src="' . $videolink . 'test-312.webm" type="video/webm">
            <source src="' . $videolink . 'test-312.ogv" type="video/ogg">
            ',

            ' <source src="' . $videolink . 'test-321.mp4" type="video/mp4">
            <source src="' . $videolink . 'test-321.webm" type="video/webm">
            <source src="' . $videolink . 'test-321.ogv" type="video/ogg">
            ',

            );

            echo $videos[array_rand($videos)]; } ?>

        </video>
    </div>
</div>

It's pretty simple; a php array to build the list of options, then an echo to list one of the urls at random.

What I need to figure out is a way to autoplay one video, then randomly play another from a set directory as soon as it ends.

I thought that I might be able to put all of the videos into a slide show, but I'm not sure how the slider would be able to trigger each one to play when it shows...

Upvotes: 0

Views: 8923

Answers (4)

Prabath Perera
Prabath Perera

Reputation: 350

To clarify from what I understand you have 12 videos and you want to play random 3 out of them, one after another. I would use below approach if I were you,

  1. on page load I would select 3 videos, you can use array of video names and then use "shuffle" function.

  2. using javascript listener after each video finishes load the other video.

    • php code to generate javascript video array

$videos = [ "video1.mp4", "video2.mp4", "video3.mp4", "video4.mp4", "video5.mp4" ]; shuffle($videos);

echo "var videos = " . json_encode( array_slice($videos, 0, 3) );

  • JS block for playback

var videos = [
     "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
     "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
  ];

var videoId =0;
var elemVideo = document.getElementById('video');
var elemSource = document.createElement('source');
elemVideo.appendChild(elemSource);

elemVideo.addEventListener('ended',play_next,false);


function play_next(){
	if(videoId==2){
    	elemVideo.stop();
	}else{
    video.pause();
		elemSource.setAttribute('src', videos[videoId]); 
		videoId++;
		elemVideo.load();
	    elemVideo.play();
    }
}
play_next();
<video id="video" width="400" autoplay="autoplay" loop="loop" muted="muted" controls>
	video not supported
</video>

Upvotes: 0

mukund patel
mukund patel

Reputation: 1052

In JavaScript or TypeScript create an array of source names and then create a random function.

function random(i){
return Math.rand()*100%12;
}

then use returned value to set source src

then you have to load your player if any other video was previously playing.

$("video").load();

then play.

$("video").play();

Upvotes: 0

seanvalencourt
seanvalencourt

Reputation: 1226

Try shuffle() (see PHP manual: shuffle()).

You can create your array containing all 12 of your videos, call shuffle() on it, and then it will output all 12 randomly every time.

Upvotes: 1

wintheday
wintheday

Reputation: 139

What you are trying to do cant be done in just PHP. PHP being a server-side language can only effect how the page originally loads. From there to get a series of videos to automatically play you will need to use client side code like jQuery or Javascript.

I would suggest using XML to list your video urls like this:

<Videos>
    <Video>
      <Name>Video Name</Name>
      <URL>link to video</URL>
    </Video>
    <Video>
      <Name>Video Name</Name>
      <URL>link to video</URL>
    </Video>
    <Video>
      <Name>Video Name</Name>
      <URL>link to video</URL>
    </Video>
</Videos>

Then use jQuery to load the XML file and populate the videos randomly onLoad and then set a new random video when the page loads. Here is a link to how to load an XML file using jQuery: Jquery.Get()

Upvotes: 1

Related Questions