I am attempting to use an HTML5 video player to preview a local video before uploading it. The video is stored as a webm blob, which I convert into a data URL so that it can be sent as a JSON payload around a Chrome Extension.
The video plays great, but I can't seem to scrub the time at all. The time increments, but trying to use the controls just does nothing. The control circle is completely to the left of the control bar, and doesn't increment as the video progresses. I do not see the total time either.
Once the video completes, the control bar works as expected. The total time is present, and the video can be scrubbed. Playing it at this point causes the control circle to proceed from left->right as expected.
The weird part is that I can set currentTime on the video before it finishes and it works great.
Here's my construction. There's nothing fancy here:
const video = document.createElement('video')
video.controls = true
video.preload = 'auto'
video.currentTime = 30 // This works, somehow
video.id = 'video'
video.width = 800
const source = document.createElement('source')
source.type = 'video/webm'
source.src = resp.recordingDataUrl // This looks like data:video/webm;base64,GkXfo59Ch.....
video.appendChild(source)
document.getElementById('root').appendChild(video)
Am I missing something necessary to scrub the time? I have noticed this when browsing videos on the web (usually Reddit), which makes me wonder if there's a webm bug of some sort.
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'm currently expiring an issue. I try to serve a video file via FileStreamResult. Basically my code looks like that:
public IActionResult Video([FromQuery] int fileId)
{
var sfs = _sourceService.GetStreamByFileId(fileId);
return new FileStreamResult(sfs,new MediaTypeHeaderValue("video/mp4")) {EnableRangeProcessing = true};
}
In the next step I try to present the video on a website. For this example, I've tried the basic HTML5 Video Player.
<video controls width="640" height="264">
<source src="UrlToVideoAction" type="video/mp4">
Everything works fine. But if I now try to skip to a later position which isn't buffered at the time, the video player stops buffering/seeking. My Application doesn't throw any exception.
Then I tried to analyse the requests and responses. I noticed that my browser sends the following range header property when I skip to a specific position which isn't buffered:
Range: bytes=101318656-
It seems like the browser tries to fetch the whole ressource. The video player stops playing and if I retry to skip to a new position no further request will be sent. I've tested that behaivour with Firefox, Chrome and Edge. My tested file is about 250 mb. I also tested several other files all in MP4 format (x264, aac)
So my approach basically is to serve a video file in ASP.NET Core which should be able to skip to a specific position.
Thanks for any help.
I'm running a VueJS application that displays a full screen story of videos. I don't create as many tag as number of media in my story : I'm just changing component video sources each time I play a new video.
But it looks like Safari (Desktop & mobile) still does not cache HTML video once loaded : when I'm playing again a previous media, Safari is downloading again the asset. Instead of getting from cache like Chrome does.
The same issue has already been reported here but sill no correct answer.
Safari even stops downloading the final bytes video (producing a sort of timeout) when we go back and forth quicky in the story, so the story looks stuck.
Here's an example link.
Does anyone know a good alternative that avoids re-downloading video data at each play on Safari ?
Partial solution
Found myself a workaround that works pretty well if video is small size - all video are less than 3Mb in my case.
The trick is to use js fetch API to download full video, then stream it into video tag.
const videoRequest = fetch("/path/to/video.mp4")
.then(response => response.blob());
videoRequest.then(blob => {
video.src = window.URL.createObjectURL(blob);
});
Contrary to video src attribute, fetch API will get video data from cache if the same video was already fetched before.
Here a codepen demo that can be tested in Safari desktop/mobile (when NOT in private mode).
Pro : Video are now pulled from cache in Safari !
Con : You can't start the video until full data has been downloaded. That's why this solution can be used only for small video (like < 5Mb), else your users may wait a while before being able to play the video.
I am trying to test WebRTC and want to display my own stream as well as the peer's stream. I currently have a simple shim to obtain the camera's stream and pipe that into a video element, however the frame rate is extremely low. The rare thing about this is that I can try examples from the WebRTC site and they work flawlessly.. The video is smooth and there are no problems. I go to the console and my code resembles theirs.. What could be happening? I tried to create both a fiddle and run that code within brackets but it still performs horribly.
video = document.getElementById('usr-cam');
navigator.mediaDevices.getUserMedia({video : {
width : {exact : 320},
height : {exact: 240}
}})
.then(function(stream){
if(navigator.mozGetUserMedia)
{
video.mozSrcObject = stream;
}
else
{
video.srcObject = stream;
}
})
.catch(function(e){
alert(e);
});
Pretty much everything I do. Take into account that I am using the new navigator.mediaDevices() API instead of navigator.getUserMedia() but I don't see how that would matter since 1.I am using a shim provided by the WebRTC group named adapter.js which they themselves use. 2. I don't think how you obtain hold of the video stream would affect performance.
Alright, I feel very stupid for this one... I was kind of deceived by the fact that the video element will update the displayed image without you having to do anything but pipe the output stream, which means the image will update but just at really long intervals, making it seem as if the video is lagging. What I forgot to do was actually play() the video or add autoplay as its property... it works well now.
I can't have the player working on IE8 with win xp (works well on IE8 with win 7)
I have two "source" tag with one ogv file and one mp4 file.
The player tags are added to the dom with ajax.
Then, the video-js player is loaded with "_V_("videoID", ..."
As said before, it works well with newer configurations, so the code is right.
If the player tags are not added to the dom with ajax, it works well. But in my case, I need to add them this way.
What I see when I load the page is that the player is there, the big play button is there. When I click play, I get the beginning of the video then it stops. Furthermore, the video is not in the good resolution, it's smaller and in the top left corner!
See picture (black is the player, and the white square is the badly shrinked video ):
In addition to that, I have a javascript error on line 1191 :
(I tried to comment out the line just to see what happens but no change)
handle.el.style.left = _V_.round(adjustedProgress * 100, 2) + "%";
Using : Version 3.2.0
Thanks for any help
PS: sound can be heard but it's all jerky and CPU hits 100% when playing
Found the bug!
I used the "seekIntro" function when the video is loaded.
When I remove the ".addEvent" line it works fine!
_V_("videoTag-<%=luo_Video.getId()%>").ready(function(){
myPlayer = this;
myPlayer.addEvent("loadeddata", seekIntro);
});
function seekIntro(){
myPlayer.currentTime(4);
}