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...
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.
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()
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();
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,
on page load I would select 3 videos, you can use array of video names and then use "shuffle" function.
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>
Related
Using PHP, how do I recursively loop through a directory of mp4 files and convert the output to produce a page containing embedded HTML5 videos?
The PHP code that I'm working with is:
$files = scandir('folder/');
foreach($files as $file) {
//do your work here
}
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
It is possible
so the code will be something like this:
<?php
$videodir = opendir('video_directory');
while(false !== ($filename = readdir($videodir))){
echo '
<video width="400" controls>
<source src="video_directory/'.$filename.'" type="video/mp4">
Your browser does not support HTML5 video.
</video>'
}
?>
If your intent is to simply mix the PHP logic and HTML together than the code is simply:
$files = scandir('folder/');
foreach($files as $file) {
echo '<video width="400" controls>
<source src="' . basename( $file ) . '" type="video/mp4">
Your browser does not support HTML5 video.
</video>';
}
Although I find it cleaner to have the logic in a separate file and do it like this:
<?php foreach($files as $file) { ?>
<video width="400" controls>
<source src="<?=basename( $file )?>" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<?php } ?>
However both are valid and only preference.
Keep in mind of the security of this issue. For example if a different file is in this directory, this could cause a security issue.
I need help. I have a file "video.php"
Where it contains an html5 player.
I want instead
www.mysite.com/myvideo.mp4
Be it
Www.mysite.com/video.php?file=myvideo.mp4
I want the src of the video to change according to what is typed in the url.
video.php
<video width="480" height="320" controls>
<source src=" **Name typed in the url** " type="video/mp4">
</video>
This will work:
<video width="480" height="320" controls>
<source src="<?php echo $_GET['file']?>" type="video/mp4">
</video>
I am trying to run many videos 1 by 1 in sequence or random
and my code is like this below
<div class="fullscreen-bg">
<video loop muted autoplay poster="assets/img/poster.png" class="fullscreen-bg__video">
<source src="assets/clip/clip<?php echo(rand(4,5,6)); ?>.mp4" type="video/mp4">
</video>
</div>
and it's just playing random only 1 video and after that, it's stopped.I want to do is keep playing other videos without stopping.
Thank you in advance!
I hope it's help full for you I Get reference from PHP: load one of 3 html snippets randomly
PHP:
$videos = array('cloud', 'bath', 'train');
$i = rand(0, count($videos) - 1); // between 0 and $videos count minus 1
HTML:
<video loop autoplay class="StretchtoFit">
<source src="assets/videos/<?= $videos[$i]; ?>.mp4" type="video/mp4">
<source src="assets/videos/<?= $videos[$i]; ?>.ogg" type="video/ogg">
<source src="assets/videos/<?= $videos[$i]; ?>.webm" type="video/webm">
</video>
My app can already upload and save the video to public/files folder. my only problem is when im displaying (let's say a 1 minute long video) it doesn't play but when i play 2 seconds long video its working. i don't know why is this happening.
i have this is my controller
$input = Input::file('vid');
$fileinput = $input->getClientOriginalName();
$input = Input::file('vid')->move($destination,$fileinput);
$post = New Post();
$post->title = Input::get('title');
$post->content = nl2br(Input::get('content'));
$post->videos = $fileinput;
$users->post()->save($post);
and in my views
<video width="600" height="500" controls>
<source src="{{ asset('img/'. $posts->videos)}}" type="video/mp4">
<source src="{{ asset('img/'. $posts->videos)}}" type="video/ogg">
<source src="{{ asset('img/'. $posts->videos)}}" type="video/webm">
Your browser does not support the video tag.
</video>
i just want to understand why this is happening thanks
I'm new to PHP. Everything else works on my site okay but I seem to have an issue with this particular piece of code. The $efn is my file name, and I need to retrieve it from a MySQL database but this code doesn't seem to work. It works in a normal video container but not when using the if statement.
Any ideas how to fix this?
<?php
$video_container = substr($efn, -3);
if ($video_container == 'mp4') {
echo '<video preload="auto" width="640" height="264" poster="../images/<?php echo $thumb ?>" controls="controls" autoPlay="false">
<source src="<?php echo $efn ?>" type="video/mp4">
</video>';
}
else {
echo '<video height="620" width="480" controls>
<source src="<?php echo $efn ?>" type ="video/avi" />
</video>';
}
?>
You have syntax problem when printing the string. Replace the <?php echo $fn ?> section by ' . $efn . '
Like this:
$video_container = substr($efn, -3);
if ($video_container == 'mp4') {
echo '<video preload="auto" width="640" height="264" poster="../images/<?php echo $thumb ?>" controls="controls" autoPlay="false">
<source src="' . urlencode($efn) . '" type="video/mp4">
</video>';
}
else {
echo '<video height="620" width="480" controls>
<source src="' . urlencode($efn) . '" type ="video/avi" />
</video>';
}