0

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...

Disillusioned
  • 13,820
  • 3
  • 39
  • 75
mdcrtv
  • 143
  • 2
  • 10

4 Answers4

1

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()

wintheday
  • 139
  • 8
  • arcodesign mentioned shuffle() for creating a random list. Given that his suggestion is still server side, I'd need to find a way to play the video list in a sequence -- probably with jquery. I could also load in the files with an xml file as per your suggestion, but the issue I'm running into now is finding a way to play these videos in a sequence (whatever the list is). I don't suppose you know of a jquery plugin for playing videos in a "playlist" style? _It should be noted that the videos shouldn't have playback controls or a visible list -- they are sort of a background element._ – mdcrtv Sep 24 '13 at 14:49
  • You can use jPlayer as arcodesign mentioned but a complete plugin might not be what you need since you don't want controls and all the fancy stuff. You could just bind an "ended" event handler to your all the videos and have that start the next video. like this: $('.video').bind('ended',function(){ this.sibling('.video').play(); }); – wintheday Sep 26 '13 at 16:14
  • I'm not sure how exactly to use this. Though it does look promising. I threw together a quick and dirty js fiddle, but it's definitely not right... http://jsfiddle.net/W4ENL/ I'll keep tinkering with it. – mdcrtv Sep 27 '13 at 19:38
1

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.

seanvalencourt
  • 1,011
  • 1
  • 9
  • 13
  • Thanks, seems like I'll have to find a video player capable of running through the list like a playlist, but this might solve the random order on load. – mdcrtv Sep 24 '13 at 14:46
  • This looks like it could be the ticket for you: http://www.jplayer.org/latest/demo-02-video/. If you view the source, you can see that you can add multiple videos to a playlist. So you could `shuffle()` server side, output your array into the appropriate JavaScript, and then use jPlayer options to remove the playlist controls. – seanvalencourt Sep 25 '13 at 15:28
  • You might check out this as well: [Video looping](http://stackoverflow.com/questions/15534704/html5-video-playlist-wont-work-also-how-do-i-get-it-to-loop-through-the-two-it). – seanvalencourt Oct 02 '13 at 15:47
  • That's brilliant! All I'd need to do is incorporate a random array into the function. – mdcrtv Oct 03 '13 at 16:13
  • Hey arcodesign, I don't suppose you can help me troubleshoot this a little further? The previous fiddle is working fine, but it's not cross-browser compatible. I put this together in that regard: http://jsfiddle.net/3uRq6/38/ Unfortunately it's not behaving and I'm not quite sure why... Any ideas? – mdcrtv Oct 04 '13 at 14:21
  • madeofcreative, that looks great! Can you explain what problems you're experiencing (particularly which browsers you're having trouble with)? – seanvalencourt Oct 08 '13 at 13:04
  • It looks like you had a few problems. You had a # in your id, which appears to have broken it. You also need to load() the video again after changing the source. See: http://jsfiddle.net/3uRq6/42/ – seanvalencourt Oct 08 '13 at 13:28
  • Here are some other resources in case you want to go more in depth: [change video source](http://stackoverflow.com/questions/12151606/setattribute-and-video-src-for-changing-video-tag-source-not-working-in-ie9) and [Modernizr](http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag) (see the top answer on this question). You may want to consider going with Modernizr if you don't want to deal with the flickering that happens on load(). – seanvalencourt Oct 08 '13 at 13:29
  • Holy cow that was fast... arcodesign, you're my hero. In regards to the browser issues, firefox couldn't play the mp4. If I needed to incorporate ogg, I thought I'd go ahead and bake in webm while I was at it. I've got modernizer installed on the site that this code belongs to, though there's still a very slight flicker between the videos. My short term solution was to just set a background on the container that matched the videos (lucky for me, they are all the same backdrop). I'll read that other post and see what they have to say about it though. Thanks again! – mdcrtv Oct 08 '13 at 16:46
0

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();
mukund patel
  • 1,037
  • 9
  • 29
  • You seem to be answering a different question that should not have been appended to the original question in the first place. Your answer would be better suited as a comment and is likely to get down-votes if you don't delete it. – Disillusioned Jan 15 '17 at 07:07
0

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>
dryize
  • 200
  • 1
  • 8