I'm trying to create a video tag for use with Chrome only. I don't always know the dimensions of the video, but I would like to have it be the size of the window. I thought I could accomplish this by using "width=100%" and "height=100%", but I found that the built-in controls were hard to see. I reduced height to 98%. Most of the videos I am currently trying to play are 720p MP4's. I tried playing a 1080p (actual dimensions being 1920x1040), and it wouldn't work (the video player acted as if my source was wrong, but I could right click and successfully download the file). The file size was more than 3 gig, I'm not sure if that had anything to do with it.
Edit: I also checked that the codecs were the exact same, and they are between the smaller and larger videos.
Anybody else having the same or like issues?
I just wanted to post on here now that I've fixed this issue. The issue was the file size information is apparently at the end of normal MP4's. For streaming, we want this information at the front of the file so the player can decide how to buffer and what-not. Chrome must do some sort of quick file size check if it doesn't find the file size information at the beginning. I used a program called QT-Faststart which moves the file size information to the front of the file. Thus solving the issue.
Related
I have videos on my website with duration of almost 2h (=> large file size).
I have managed to convert them to h265 to reduce server load. To further reduce server load I also want the video to only load e.g. the next 10min from the point the user currently is at in the video (and not the entire video). Youtube is doing it this way.
The HTML preload attribute does not have this option. Is there such a feature in ffmpeg (or anywhere else)?
Thanks for a hint
You need to work with "Dynamic Adaptive Streaming over HTTP". It could be implemented via javascript.
I suggest looking into Dash.js github page
Is there a way to control how much of the file will be buffered ahead, once you click play, much like Youtube once did?
If you use the built-in video support in the browser then there is no way to control the amount of data that's being buffered. It depends on the browser implementation and there is no API to control it.
Browser implementations are quite good and typically a browser buffers just a small portion of the video before playback begins. Browsers don't download the whole file. However if a file gets completely downloaded by the browser before playback begins then possible causes include:
Maybe the file is very small and the browser has decided to buffer the whole file in memory.
Maybe the header of the file (required to initialize the video decoder) is not at the start of the file but at the end and the browser has to download the whole file until it reaches it. This is uncommon nowadays but old video encoders used to place the mp4 header at the end of the file instead of at the beginning because it simplified the encoder's implementation.
I've noticed that browsers behave oddly if an mp4 file doesn't have a segment index (used for seeking) in its header. Some browsers download the whole file so that they can build a segment index themselves.
If your server is old/misconfigured then the browser may decide that range requests are not supported and download the whole file (or disable seeking).
If you require to control the buffered amount before playback begins then you have to use a more sophisticated protocol (MPEG-DASH, HLS) and a javascript player that allows you to control this parameter. Youtube use MPEG-DASH and have their own player that they've developed over the years.
I'm pretty sure you c an't stop the HTML5 video from buffering the entire video, but here is a useful link for working out how much of the video has been buffered.
https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/buffering_seeking_time_ranges
Like mylescc mentioned, preventing the video element from buffering might not be possible, without a workaround (described in a similar posting). However, depending on your use case, you can also make use of existing player implementations, which provide this functionality, like the bitmovin player, dash.js, etc.
I have video that will be divided into 4 videos.
First the player will stream a lower resolution of the original video, then the user can zoom into the video to see more details, I need the player to stream one of the 4 videos - that's higher in resolution- based on where the user zoomed in.
How can I make that using VideoJS or any other video player ?
After searching, this is the answer ...
For zooming into the video, you can follow this tutorial: Zooming and rotating for video in HTML5 and CSS3
For switch streaming of videos in the same player, you can make that by changing the source on html5 video tag and make some calculations to know where the user zoomed in and hence change the source video.
As there is no response yet let me analyse the problem. This is by no means meant as a full answer, but other people will probably be able to answer parts of the problem:
First the player will stream a lower resolution of the original video,
This means you will need to create/use a video stream. There are plenty of plugins you can use for videostreaming, and depends on what you want. You can consider writing it yourself using for example C#'s System.IO objects and transforming the video in bytes(And putting it back together) The resolution would be easiest reached by just having a seperate video file for this step of the proces. (a lower resolution one used for streaming only)
then the user can zoom into the video to see more details, I need the player to stream one of the 4 videos - that's higher in resolution- based on where the user zoomed in.
So you need to trigger a zoom effect. This means you would need to detect zoom. This would be possible with Javascript in a webbrowser, if you want a browser based application. When that zoom is triggered you can retrieve what position the mouse is on the screen/in the div or on some sort of overlay. Depending on this position you could show another stream.
How can I make that using VideoJS or any other video player ?
Basically these steps above is how i would start looking into this specific case. Considering your VideoJS as a suggestion i assume this is browser based. This would probably mean using Javascript libraries, maybe combined with a server side language.
Thats as far as i can go. Maybe someone can pick up specific parts of the thing i wrote and help you a step further.
Have a nice day!
I am using videojs (although irrelevant I believe, I include this fact anyway) to server html5 video.
The problem is, in chrome, buffering stops just after 2.84MB have been downloaded of the video (this seems variable, I just took the figure from here). This represents between 40-60% of my video files.
I realise I'm probably not going to get over this problem from a webpage perspective, my question is:
What can I do to make the video buffer 100% in Google Chrome?
It is vital that my video be buffered 100% before I can do anything else with it, the reason for this being that I immediately need to be able to seek to several places in the video very quickly.
In the past I have added the video an the page to the AppCache. This will ensure that the entire video is downloaded and stored locally. However, the Browser still might only buffer the same percentage in the video element but because it is stored locally on the disk then Random access is very quick.
Alternatively if you are concerned by the buffering you could XHR the video in and store it in either IndexedDB or the FileSystem APi.
I'm setting up a website which ultimately displays videos. The video files are all .mpg and requirements prevent me from converting these to another format such as flv. So far I have been playing around with Windows Media Player but have found that it doesn't play nice with non IE browsers. The problem which arises is that although the video will play, it doesn't shrink itself to fit in the WMP container and so only the top corner is visible. This problem goes away if I download the np-mswmp plugin for Firefox however it is a manual install and I'd rather not leave it to the user. Once the Firefox plugin is installed, Chrome also plays the files correctly but I doubt that the average user would ever think to do this.
Is there a better way to embed .mpg files into a web page, an alternative player which doesn't require file conversion? I have had a play with Quicktime but it only ever shows a Q with a question mark imposed over it, even when I associate Quicktime with .mpeg files. Any advice would be appreciated!
Thanks,
James
I'm sorry to say there isn't a good way to do cross-browser video without being able to force your users to install something. That is why every video site uses flash, since it's the nearest thing to a standard - but of course flash has some gaps in coverage, the most significant being iPhones.
Windows Media Player has only about 70% penetration and Internet Explorer somewhat less. By going this route you will end up with 1 in 3 users unable to view your videos.
Either bite the bullet and move to Flash as a video player or just give your users a download link. A download link is a very easy way to support almost every user, if you can do that.