I'm developing a Cordova app for Android and I need to put a video with some cue points controlled by buttons.
In the HTML, I have the code to load the mp4 file and the buttons. With JS I'm trying to add the cue points on a click event, but any number I put in the currentTime property, always starts from the beginning of the video. Instead of start from the point I have put.
The code I have is:
document.getElementById("video").load();
document.getElementById("video").addEventListener('loadedmetadata', function() {
document.getElementById("video").play();
document.getElementById("video").currentTime = seconds;
}, false);
I tried to change the order of the lines, because I read something over there but no results.
EDIT:
Still no results, now I'm with this:
document.getElementById("video").currentTime = seconds;
document.getElementById("video").play();
But does the same as the others.
Anyone can help?
Thanks.
It was because of the frame rate.
The video I was trying initially had 30 and I tried with one of 24 and it worked.
Related
I've searched here and found some very old answers but I think this question has not been answered. I'm using the MediaCloud plugin in Wordpress to display videos. When I create a page, I can use a short tag to display a video by including this in my HTML markup:
<div id="my_video">
[mux_video id='2926' autoplay='false' loop='false' muted='false' controls='true' inline='false' preload='metadata']
</div>
Wordpress will query an internal db for media id=2926 and ends up rendering this HTML markup to display the video (url changed for privacy):
<div id="my_video">
<figure>
<video class='mux-player video-js' width=1920 height=1080 poster='https://www.example.com/wp-content/uploads/2021/08/2926--thumb.jpg' controls preload='metadata'>
<source src='https://stream.mux.com/<-LONG-ENCODED-ID-HERE>.m3u8' type='application/x-mpegURL' />
</video>
</figure>
</div>
My configuration of MediaCloud uses videojs to display the video but I've been unable to locate any useful function in the docs which can tell me if the video in question is a livestream or some previously broadcast live stream or uploaded video with a fixed duration (presumably progressive download?). It seems clear that the JS running in the page can tell the difference because a livestream clearly has the LIVE indicator visible and the timeline indicator/scrubber removed whereas an old video will have the timeline indicator/scrubber and displays the fixed length of the video.
I thought at first that I might sniff for the Program Data Time (PDT) and this might be absent for pre-recorded content, but MUX also provides PDT for old livestreams. This code will output the PDT for the currently running video but cannot be used to distinguish livestream from old videos:
const video1 = document.querySelector("#my_video video");
let player1 = videojs(video1);
window.player1 = player1;
player1.on('loadeddata', () => {
let metadataTrack = Array.prototype.find.call(player1.textTracks(), track => track.label === 'segment-metadata');
metadataTrack.on('cuechange', () => {
let pdt = metadataTrack.activeCues[0].value.dateTimeString;
document.getElementById('pdt_1').innerHTML = pdt;
});
});
I also tried checking for the video's duration to see if that might help me distinguish -- was thinking a livestream might have some empty value for duration but that's not the case. So far, it always shows me some positive integer value when I do this:
video1.addEventListener('loadedmetadata', (event) => {
// duration and dimensions of video are now known
let dur = Math.round(video1.duration);
console.log(dur)
});
Is there some simple JS that I can use to return a true/false value indicating whether the video in question is a livestream or whether it's an old video of fixed duration? Someone suggested querying the MUX API but that's not going to work for me in this case and would gum up my page load times.
player.duration() is Infinity for live streams. The live indicator checks that on durationchange events.
I am trying to get a sort of 'YouTube' like number of views section in my html. I want to add 1 everytime the viewer gets over minute 4 of the video.
So far I applied this Javascript but it does not look like working, what am I missing?
<section id="totViews">
<script>
document.getElementById("totViews").innerHTML = counter;
var counter = 0;
$('section video').on("timeupdate", function() {
if ($('section video')[0].currentTime >= 4) { counter++;
}
});
</script> views
</section>
JavaScript runs in the user's browser. It has no way of communicating with other browsers viewing the video, and it will stop counting when you close the page, so it will only ever be able to count how often you watched the video in the current session.
You need to load and store this information on your server somewhere if you want to make this work.
I have an Axis camera which has multiple outputs, one of which is a jpg image. This image is a still taken from the camera at the time you load it up. I would like to implement a way for the image to reload (every 30 seconds) without having to reload the entire page, however, I would like for the code to fully download the image before updating it to avoid having a blank screen.
I have been reading around and the closest thing I found was this post Using AJAX / jQuery to refresh an image but the difference is that the image feed I have is coming from the actual camera itself not a php file. I have tried a couple of ways to get this working with my url but I have failed due to the lack of javascript knowledge.
The code I'm using right now to pull up the image is just a simple image tag...
<img src="[camera ip]/jpg/1/image.jpg">
and any time you refresh the browser window it gives you a snapshot of the current video stream.
Any help would be greatly appreciated!
Regards,
Javier
I couldn't find a webcam online with a refreshing image to test this against, but I think this should to the trick for you... or at least get you really close...
<script>
// URL to your cam image
var cam_image = 'http://absdev.ws:8000/jpg/1/image.jpg';
var buffer = {};
function preload() {
buffer = new Image();
// attaching the seconds breaks cache
buffer.src = cam_image + '?' + (new Date()).getTime();
buffer.onload = function() {
setTimeout(preload, 30000); // 30 seconds refresh
document.getElementById('myimg').src = buffer.src;
}
}
preload();
</script>
If you are working with a static group of pictures - you already know the filenames and it's not going to change - you would load everything into your html initially (that solves the blank screen concern), then use a jquery plugin to rotate/refresh the images at the interval you specify, be it 30 seconds or whatever.
So, your html would look something like this:
<ul>
<li><img src="[camera ip]/jpg/1/image.jpg"></li>
<li><img src="[camera ip]/jpg/2/image.jpg"></li>
<li><img src="[camera ip]/jpg/3/image.jpg"></li>
...
</ul>
And then the plugin would cycle through them.
For plugins, use one of these two:
http://nivo.dev7studios.com/
http://jquery.malsup.com/cycle/
Good luck!
I am researching setting up a script that will show certain notes along with accompanying music tracks. Basically I need certain times in the audio track to trigger events. I have seen I could use the currentTime similar to the following, but I am getting hung up on a good way to make a concise function to move between frames and move back and firth if there is a rewind etc. Help's appreciated greatly!
$("#ogg_player_1_obj").bind('timeupdate', notePosition);
function notePosition(){
myVid=document.getElementById("ogg_player_1_obj");
mct=myVid.currentTime;
//SET Frame based on time???
}
function notePosition(){
//your code.
if(frame1start <= mct && frame1end >= mct) {
$(".frame").fadeOut(100);
$("#frame1").fadeIn(100);
}
//and again for every frame.
}
This works if you put every frame in a seperate element with class frame and the id frame + number.
Is it possible to seek to a particular point in html5 video displayed in a web page? I mean ,can I input a particular time value (say 01:20:30:045 ) and have the player control (slider) move to that point and play from that point onwards?
In older version of mozilla vlcplugin I think this is possible by seek(seconds,is_relative) method..but I would like to know if this is possible in html video.
Edit:
I created the page with video and added javascript as below.When I click on the link ,it displays the time of click..but it doesn't increment the play location..but continues to play normally.
Shouldn't the video play location get changed?
html
<video id="vid" width="640" height="360" controls>
<source src="/myvid/test.mp4" type="video/mp4" />
</video>
<a id="gettime" href="#">time</a>
<p>
you clicked at:<span id="showtime"> </span>
</p>
javascript
$(document).ready(function(){
var player = $('#vid').get(0);
$('#gettime').click(function(){
if(player){
current_time=player.currentTime;
$('#showtime').html(current_time+" seconds");
player.currentTime=current_time+10;
}
});
}
);
You can use v.currentTime = seconds; to seek to a given position.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
Unfortunately it seems with some movie elements it behaves differently than others. For instance with an amazon video_element, it seems you must call pause before you can seek anywhere, then call play. However, if you call play "too quickly" after setting the currentTime then it won't stick. Odd.
Here is my current work around:
function seekToTime(ts) {
// try and avoid pauses after seeking
video_element.pause();
video_element.currentTime = ts; // if this is far enough away from current, it implies a "play" call as well...oddly. I mean seriously that is junk.
// however if it close enough, then we need to call play manually
// some shenanigans to try and work around this:
var timer = setInterval(function() {
if (video_element.paused && video_element.readyState ==4 || !video_element.paused) {
video_element.play();
clearInterval(timer);
}
}, 50);
}
Top answer is outdated.
You can still use:
this.video.currentTime = 10 // seconds
But now you also have:
this.video.faskSeek(10) // seconds
The docs provide the following warnings regarding the fastSeek method:
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The HTMLMediaElement.fastSeek() method quickly seeks the media to the new time with precision tradeoff.
If you need to seek with precision, you should set HTMLMediaElement.currentTime instead.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/fastSeek
Based on the above I guess the following is best if cross browser compatibility and performance are your top priority:
const seek = secs => {
if (this.video.fastSeek) {
this.video.fastSeek(secs)
} else {
this.video.currentTime = secs
}
}
seek(10)
If you prefer accuracy over performance then stick with:
this.video.currentTime = secs
At the time of writing faskSeek is only rolled out to Safari and Firefox but expect this to change. Check the compatibility table at the above link for the latest info on browser compatibility.