My video src is an AWS presigned request url, it expires in x amount of time. The video will start playing just fine in video.js. For large video files after the brief url expiration time, changing the seek bar causes a network error because the original src link has expired. How do you refresh the src with another unexpired presigned url without restarting from the beginning of the video? I don't want the video to go back the beginning.
So far I have found that you can capture the change of the seek bar by listening for the event 'timeupdate' and in the passed event testing for e.manuallyTriggered.
Thanks
i had this same issue today. i'm using plyr instead of videojs, so i'm not sure if you can do this exact thing, but my solution was:
bind an error handler to the player for when the link has expired and someone tries to play/seek, and then in the handler...
store the current time of the video
send an ajax request to my server to get an updated signed URL
update the source of the player
set the current time of the video to the previously stored time
it's kind of slow/clunky, but it's the best fix i could come up with at the moment, aside from loading the entire video before allowing playback (which didn't seem like great UX).
update: this does work with videojs...but it doesn't work with either player in Safari, which apparently doesn't send the error event at all.
Related
I have two live videos feeding an encoder which creates H.264 chunk files and an HLS manifest which is being served by an apache web server.
A browser page using video.js shows a player. Pressing "play" on the browser properly plays the video. It works well.
However, if we change video sources (by flipping the switch in the picture below), there is a considerable delay (10 seconds) before the new content is displayed in the player. I'd like to get that to 3 seconds.
It appears that video.js and/or the HTML5 player in browser is buffering that amount of content. (if you delete the files on the web server, kill apache, or even pull the ethernet cable, the video keeps on playing!)
A button on the web page controls the switch. When clicked, I would also like to clear or reset the player so that it immediately re-reads the index.m3u8 manifest and downloads the new chunks.
So far, haven't found anything promising searching the internet or in the video.js API docs. There are lots of articles on API calls for fetching the current buffer percentage but cannot find any API for clearing it altogether.
Any ideas?
The encoder is set for 3 second chunks and the playlist depth is set for 10 entries.
I had a similar problem. Since i could not find a reliable API for this, i came up with a rather dirty workaround to clear the buffer:
var ctime = player.currentTime();
player.currentTime(0);
player.currentTime(ctime);
This currently works for me in all major browsers.
I've added some video app previews for my app on App Store Connect and when I set the video poster frame, it never saves the image that I want, it always reverts back to the one that Apple defaults to initially. Does anyone know a work around?
UPDATE: I did get in contact with App Store Connect and they told me it's a recent bug that they're actively working on fixing. I'm going to touch base with them early next week.
Issue is still happening. But if you want to be able to upload without problems try this:
Upload the screenshots of one complete language
Don't touch anything for 2-4 min once pictures are uploaded.
Then you can refresh the webpage and check if the screenshots are well uploaded.
When using videojs-contrib-ads to create an ad plugin in video.js, the main programme often starts playing before the ads start playing. It seems that video.js connects to the CDN of the main content initially and then contrib-ads checks if it needs to play prerolls. A few seconds of the main content is sometimes played before this happens and only then does it start to play the adverts.
This was seen mostly on iOS on live feeds.
Does anyone know why it works like this and is there a way to stop it?
Use the prerollTimeout setting.
The maximum amount of time to wait for an ad implementation to initiate a postroll, in milliseconds. If contentended has been fired and the ad implementation does not call startLinearAdMode() before postrollTimeout expires, the content video will end playback.
Is it possible to capture a snapshot of a video that's loaded using the HTML5 video element and use that as a preview image until the video loads or the play event is triggered? I know about the poster attribute but I want the thumbnail to be self generated, like a random frame from the video. Sort of what YouTube/Vimeo does.
Thanks,
I don't think that this is possible in pure HTML5. Principally because the stream is not loaded when you see the 'object' in the webpage so the client can't get the desired frame.
However, the best option for you is to save / cache the 'random frame' before loading the page and then use it as the poster of the video. This will allow you to reduce the client work and save the bandwith.
check THIS, which is the first thing that I've found (if you're using PHP and you want a 'quick and dirty' way to get the frame)
Update
Apparently HERE there is a solution with popcorn.js BUT it seems that you can't do it in the way that (I suppose) you need.
This because it would be possible to do this only inside the same domain due to browser security issues.
My requirement is to test video played on particular web page. I need to capture its screen at particular interval. Its start time, end time, duration etc. How to do that
The application I test also has video requirements. Rather then trying to get Selenium to do something it really isn't made for, I created my own methods that parse the URL of the video and make sure it gets a 200 HTML response, just to make sure there's a video there.
Otherwise, I don't believe there are any ways to get the duration of the video without relying on what's in the markup. If you do use what's there, the Java API allows you to take a screenshot as follows:
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);