Javascript autoplay video (mp4) on Opera browser? - javascript

I have made a website which we use on a TV to welcome guests/customers to our business. There's a SQL database which we write their names to be presented on the screen, and there is also a video which is playing in a different frame on the same website.
This all works very well on desktop PC Chrome. But we use the built in browser in the TV (which is a business model used for stuff like this). The browser is Opera and it supports HTML5.
Problem is that after a while, can be 2 hours, can be a day, it will stop playing the video, and just show a black frame.
This is the code:
<source src="video/video1.mp4" type='video/mp4'/>
</video>
<script type='text/javascript'>
video_count =1;
videoPlayer = document.getElementById("video");
function run(){
video_count++;
if (video_count == 3) video_count = 1;
var nextVideo = "video/video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
videoPlayer.loop();
};
</script>
This will play the files named video1.mp4 and video2.mp4... etc. Right now there is only one file in this folder called video1.mp4, and it will autoplay and it will loop. But it will fail to autoplay after a while and just show a black frame.
Any ideas?
Thanks!

I'd recommend looking into video events with javascript in this case if you're starting to see bugs.
For example (from Detect when an HTML5 video finishes post) you could start playing your next video like this:
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
You could simply move on to the next video, or seek back to 0 on its timeline and play it again. The other option if you're wanting to loop 1 video, you'd be better using the loop option in your <video> tag:
<video loop>
<source src="video/video1.mp4" type="video/mp4">
</video>

Related

Audio stops playing while moving to fallback mount using Icecast

I was wondering if someone has had a similar problem:
I have defined fallback mounts in Icecast2 so that one major stream plays at all times. If another fallback mount becomes active, the latter becomes the active.
I have tested the streams (mp3 format), with ffplay and the transition happens with no problem. The problem exists when I use an html5 audio tag to listen to the audio: transition does not happen automatically and I have to reload the browser and click play in order to listen to the stream. That is, using the browser, when the fallback stream gets enabled, the sound stops and I have to reload the browser and click play in order to listen[to the other stream]. The same problems occurs in all major browsers.
Here's an excerpt from my icecast.xml:
<mount>
<public>0</public>
<mount-name>/stream</mount-name>
<hidden>0</hidden>
</mount>
<mount>
<public>0</public>
<mount-name>/stream1</mount-name>
<fallback-mount>/stream</fallback-mount>
<fallback-override>1</fallback-override>
<username>stream1</username>
<password>pass</password>
<hidden>0</hidden>
</mount>
This is what ffplay shows while connecting and disconnecting from the secondary source:
The html5 code that plays the audio is as follows:
<audio controls>
<source src="http://127.0.0.1:3333/stream1" type="audio/mpeg">
</audio>
I got this finally working by going as follows:
First I noticed that when I switched from one mount point to another by enabling the source, the audio stopped playing. I set up a timer to fire every 1 second in order to check audio.currentTime and compare to an previous value. Then when the result is true, I reset the audio source to the same stream. It's kind of a hack but it seems to solve the trick.
html code:
<audio id="audio" controls>
<source src="http://127.0.0.1:3333/stream1" type="audio/mp3">
</audio>
javascript code:
var audio = document.getElementById('audio');
var myVar = setInterval(myTimer, 1000);
var oldTime = "";
function myTimer() {
if ((audio.paused != true && (audio.currentTime - oldTime) == 0 )) {
audio.src="";
audio.src="http://127.0.0.1:3333/stream1";
audio.play();
}
oldTime = audio.currentTime;
};

Play full HTML5 video and then loop a section of it

I'm trying to play an 8.6 second video once completely, and then loop a small section of the video infinitely, to keep the illusion of a never-ending video. So far I've looked into the media fragments URI, and the ended event of the video. Setting the currentTime attribute in the ended event listener works, but it makes the video "blink".
At present, I'm using a timeupdate event listener to change the time when the video is approaching the end [shown below]
elem.addEventListener('timeupdate', function () {
if (elem.currentTime >= 8.5) {
elem.currentTime = 5;
elem.play();
}
}, false);
JSFiddle here
This works as well, but the video pauses visibly before restarting at 5 seconds. Is there a smoother way of playing the video once and then looping a segment of it?
Your code is fine, the problem is with your MP4 file! Try using a much smaller video like this one ( http://www.w3schools.com/tags/movie.mp4 ) to confirm the issue is not with your code.
So how can you achieve the same result but with large videos files?
You will need two video files:
video1 is the main video
video2 is the looping video
Remember: HTML5 video has no problem playing and looping large video files so we will use this method to play the videos.
In the example below we will play the first video and when it finishes we will execute a function to hide video1 and then show/play video2. (Video 2 is already set to loop)
Don't forget to load JQuery in your head otherwise this will not work.
<video id="video1" width="1080" height="568" poster="movie.png" autoplay onended="run()">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<object data="movie.mp4" width="1080" height="568">
<embed width="1080" height="568" src="movie.swf">
</object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>
<video id="video2" width="1080" height="568" poster="loop.png" loop>
<source src="loop.webm" type="video/webm">
<source src="loop.ogg" type="video/ogg">
<source src="loop.mp4" type="video/mp4">
<object data="loop.mp4" width="1080" height="568">
<embed width="1080" height="568" src="loop.swf">
</object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>
<script>
$( "#video2" ).hide();
function run(){
$( "#video1" ).hide();
$( "#video2" ).show();
document.getElementById("video2").play();
};
</script>
Try the following, to 'rewind' it as soon as it ends:
vidElem.addEventListener("ended", function () {
vidElem.currentTime = 2.5;
vidElem.play();
}, false);
Updated fiddle: http://jsfiddle.net/Lt4n7/1/
I just had to deal with the same problem and noticed the same issues with flickering. Here was my solution:
Get 2 videos (or sets of videos) - one for the non-looped section, the other for the looped section
Create 2 video elements
set the looping element to 'display:none'
Then just capture the ended event and swap display status (example uses jquery but you could use 'style.display="none/block"' just as easily:
VideoPlayer1 = document.getElementById('video1');
VideoPlayer2 = document.getElementById('video2');
VideoPlayer1.addEventListener('ended', videoLooper, false);
function videoLooper()
{
VideoPlayer2.play();
$(VideoPlayer2).show();
$(VideoPlayer1).hide();
}
You can't solve this issue in javascript. That delay you see depends on the video compression and the hardware.
To start playing at a time that is not 0, the video decoder has to go back and find a key frame and then build the current frame by reading everything between the last key frame and your chosen time.
I'm not an expert in video compression, but maybe there is a way to pick these key frames and place them exactly where you need them. I don't think it will be easy and smooth, though.
If you're looking for an easier solution, use #Random's, but it uses two <video> tags to work around this limit.
var iterations = 1;
var flag = false;
document.getElementById('iteration').innerText = iterations;
var myVideo = document.getElementById('video-background');
myVideo.addEventListener('ended', function() {
alert('end');
if (iterations < 2) {
this.currentTime = 0;
this.play();
iterations++;
document.getElementById('iteration').innerText = iterations;
} else {
flag = true;
this.play();
}
}, false);
myVideo.addEventListener('timeupdate', function() {
if (flag == true) {
console.log(this.currentTime);
if (this.currentTime > 5.5) {
console.log(this.currentTime);
this.pause();
}
}
}, false);
<div>Iteration: <span id="iteration"></span></div>
<video id="video-background" autoplay="" muted="" controls>
<source src="https://res.cloudinary.com/video/upload/ac_none,q_60/bgvid.mp4" type="video/mp4">
</video>
<div>Iteration: <span id="iteration"></span></div>
// Please note that loop attribute should not be there in video element in order for the 'ended' event to work in ie and firefox

HTML5 video source changing

I have a video tag like this. All this videos have to play dynamically one after other
I tried writing some javascript functions in eventlistner "progress" of the video, but not working.How to play these videos automatically?anybody please suggest any codes in javascript or jquery
<div id="divVid">
<video id="video1" width="320" height="240" autoplay >
<source src="vid_future technology_n.mp4#t=20,50" >
Your browser does not support the video tag.
</video>
</div>
JS Code (Updated from comment section)
document.getElementById("video1")
.addEventListener("progress",
function () {
var i = 0;
var vid = document.getElementById("video1");
if (vid.paused) {
if (vid.currentSrc == myvids[i]) {
vid.currentSrc = myvids[i + 1]; } i = i + 1;
}
});
The set of <source> elements provide alternative formats for the video for different devices, not a playlist.
If you want to have a playlist, then listen for an ended event and change the src with JavaScript.
In response to edits to the question:
No, really change the src. You are trying to change the currentSource which is defined as being readonly
I said ended. Don't touch progress, you what to play the next video when the last one is finished, not when a tiny chunk of it has played
The list of <source> elements still isn't a playlist. Don't try to use them as such. Keep the list of videos somewhere else (e.g. a JS array).

Dynamically using the first frame as poster in HTML5 video?

I'm wondering if there's any straightforward way to achieve this effect, without needing backend code to extract a frame, save it as a jpg and database it somewhere.
An effect whereby the first frame of the video just shows up as the poster when the video loads would be so helpful (it would only work if the browser can play back the video obviously, which might be a little different from how poster traditionally works, but that is not a concern.
Did you try the following?
just append time in seconds #t={seconds} to source URL:
<video controls width="360">
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4#t=0.1" type="video/mp4" />
</video>
I have chosen a fraction of second (0.1) to keep number of frames small, because I have the suspect that if you put 1 second, it would "preload" the first 1 second of video (i.e. 24 frames or more ....). Just in case ...
Works fine on Chrome and Firefox on desktop :)
Works not on Android mobile, though :(
I did not test on iOS, iPhone, IE yet ??
Edit May 2021:
I realized that many modern browsers now show automatically a poster of first frame.
Seems like they heard us :-)
To make it simple you can just add preload="metadata" to your video tag and the second of the first frame #t=0.5 to your video source:
<video width="400" controls="controls" preload="metadata">
<source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>
Best of luck!
There is a Popcorn.js plugin called Popcorn.capture which will allow you to create posters from any frame of your HTML5 video.
There is a limitation that is imposed by the browser that prohibits reading pixel data of resources requested across domains (using the canvas API to record the current value of a frame). The source video must be hosted on the same domain as the script and html page that is requesting it for this approach to work.
The code to create poster using this plugin is quite simple:
// This block of code must be run _after_ the DOM is ready
// This will capture the frame at the 10th second and create a poster
var video = Popcorn( "#video-id" );
// Once the video has loaded into memory, we can capture the poster
video.listen( "canplayall", function() {
this.currentTime( 10 ).capture();
});
I recently did this for a recent project that works on desktop and mobile. The trick was getting it to work on iPhone.
Setting preload=metadata works on desktop and android devices but not iPhone.
For iPhones I had to set it to autoplay so the poster image automatically appears on initial load. iPhones will prevent the video from auto playing, but the poster image appears as the result.
I had to do a check for iPhone using Pavan's answer found here. Detect iPhone Browser. Then use the proper video tag with or without autoplay depending on the device.
var agent = navigator.userAgent;
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ;
$videoTag = "";
if(isIphone()) {
$videoTag = '<video controls autoplay preload="metadata">';
} else {
$videoTag = '<video controls preload="metadata">';
}
You can set preload='auto' on the video element to load the first frame of the video automatically.
Solution for #2, #3 etc. frames. We need attach disposable handler .one() for resetting default frame.
<video width="300" height="150" id='my-video'>
<source src="testvideo.mp4#t=2" type="video/mp4" />
</video>
$(function () {
let videoJs = videojs('my-video');
videoJs.one('play', function () {
this.currentTime(0);
});
});
I found a great way to dynamically add poster to a video!
To show the desired frame from video (in my case it's the frame at 1.75 seconds) - add preload="metadata" to the video element and #t=1.75 to the end of source URL.
Add eventListener to the video element that will listen for play event only once.
Once the event is emitted reset the video time.
<video width="100%" controls="controls" preload="metadata" id="myVid">
<source src="path/to/your/video#t=1.75" type="video/mp4">
</video>
<script>
var el = document.getElementById('myVid');
el.addEventListener('play', () => {
el.currentTime = 0;
}, { once: true });
</script>

Changing video on mouseclick?

I have two videos, and I want to loop the first video until the user clicks the mouse, at which point I want to switch to playing the second video. Does anyone know what the best way to do this would be?
Edit: Sorry, to clarify, I would prefer to use HTML 5 (assuming this is possible). I am trying to have the two videos swapped out seamlessly, one on top of another. I want it to look like clicking the mouse made the video finish or progress. So I need to pause/hide the first one and show/play the second one.
Update: With Galen's help and some Google searches, I figured it out:
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function swapVideos() {
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
video1.style.display = 'none';
var video2 = document.getElementsByTagName('video')[1];
video2.play();
}
</script>
<body>
<video src="video1.ogg" controls="controls" loop="loop" autoplay="autoplay" onclick="swapVideos();">
your browser does not support the video tag
</video>
<video src="video2.ogg" controls="controls" preload="preload">
your browser does not support the video tag
</video>
</body>
</html>
Add this code to the click event of whatever you want
// pause first video
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
// play second video
var video2 = document.getElementsByTagName('video')[1];
video2.play();
Add this to make the first video loop
var video1 = document.getElementsByTagName('video')[0];
video1.addEventListener('ended', function () {
video1.play();
});
it's tough to be specific with the information you have given, but you could use javascript or jquery to do this. Bind a click event to a DOM element, and on click change the source of the video. I am assuming that the video is determined by a source parameter in an swf.

Categories

Resources