I'm setting up a video portfolio site to showcase different concepts for software devs, and there are often multiple versions of the same video.
I wrote the following javascript to change videos and it works fine locally, the problem is that once its hosted changing videos breaks the video player. I'm guessing the cause is because the new video is not loaded. Any ideas?
function switcher(wrapper, e, source, container, video){
//get current version and turn off its style
var off = document.getElementById(wrapper).getElementsByClassName("versionActive")[0];
off.className = "version";
//turn on the new button
e.className = "versionActive";
var videoSource = document.getElementById(source);
var videoContainer = document.getElementById(container);
lastPlayingVideo.currentTime = 0;
lastPlayingVideo.pause();
lastPlayingVideo = videoContainer;
videoSource.setAttribute('src', video);
videoContainer.load();
videoContainer.play();
}
The html for the video player looks like this:
<video id="container1" controls="" loop="" preload="auto" width="1280" height="720">
<source id="video1" src="videos/Reminder.mp4" type="video/mp4">
</video>
Try :
videoContainer.addEventListener('canplay', function() {
videoContainer.play();
videoContainer.removeEventListener('canplay');
});
videoSource.setAttribute('src', video);
videoContainer.load();
canplay is fired when the browser supposes you have received enough of the file and you can continue playing it considering your connection speed.
Related
I have a video element like:
<video id="video" width="320" height="240" autoplay controls muted></video><br/>
The stream data are pushed into an array:
let blobs_recorded = [];
media_recorder = new MediaRecorder(camera_stream, { mimeType: 'video/webm' });
media_recorder.addEventListener('dataavailable', function(e) {
blobs_recorded.push(e.data);}
All is running fine and I can record a full video without problem. Well I want to create an new video from this full recorded video and only want to get the last three seconds of this vid until end. I tried to manipulate the Blobs but video is then black. I found out if I put the the first blob to the new video then I can see this video, but I got the metadata of the full big video in the small video. Any idea how I can solve it smart?
Greetings.
I'm using iframe to embed a mp4 video from S3.
<iframe class="you1" src="https://s3-us-west-2.amazonaws.com/vidcuratorfx2training/Video+1.mp4"></iframe>
But this video is auto playing when loaded. Since there are multiple videos on the page, all videos starts playing automatically.
I tried to pause all videos using below js code but it's not working.
<script>
window.onload = function() {
var frames = document.getElementsByTagName("iframe");
for (var i = 0; i< frames.length; i++) {
var innerDoc = (frames.item(i).contentDocument) ?
frames.item(i).contentDocument : frames.item(i).contentWindow.document;
var iframeVideoTags = innerDoc.getElementsByTagName("video");
for (var j = 0; j < iframeVideoTags.length; j++) {
iframeVideoTags.item(j).pause();
}
}
}
</script>
My CSS constraints are limiting to use HTML5 video tag. I need to used iframe only.
How to load iframe videos paused by default?
Check this out
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
But using above code, you need to add two different format of video
for different browser support.
My best suggestion would be upload your video on youtube and add the youtube link to your "iFrame's src". the advantages of using youtube url is that youtube handle all the possibilitis like you minimize the screen and others
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>
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
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).