Problem
I'm having videos on a webpage that show the first frame of the video and on hover play the video with a length of around 10 seconds and a resolution of around 720p. I thought of just uploading them to my provider's FTP storage. But then thought that they surely don't use CDNs to deliver content.
So my next thought was using something like Vimeo, Cloudinary, MUX...
I now have seen that I could add videos on a webpage with HLS (m3u8). But I've never done that before so I read my way through these streaming formats.
After that, I'm really unsure what to use in my case as it seems that HLS or DASH is usually more performant than downloading the whole file.
Vimeo for example would give me the option to get a direct link to the .mp4 or HLS.
I'm not seeing a video when using a standard tag. But I found articles that say HLS is now supported in every major browser.
Would you recommend going for such a use case with HLS or Dash and if yes what's the best way to implement it?
What I've tried
<video width="320" height="240" controls>
<source
src="https://player.vimeo.com/external/734323487.mpd?s=234"
// type="application/x-mpegURL"
/>
Your browser does not support the video tag.
</video>
I have a simple HTML5 video embed that displays a blank (white) frame when loaded on iOS. On desktop browsers (including Safari) and Android the first frame of the video is displayed.
I understand that you can avoid this by setting an explicit poster image, but I'm hoping I can avoid having to set up a transcoding service to extract the first frame of the videos. I understand that Apple has probably chosen this route to limit the bandwidth use for mobile users, but in this instance it's just overkill to set up a transcoding service.
I've played around with the preload attribute, but neither setting it to
auto or metadata works. Is there any other way to display the first frame of the video without interaction from the user?
Here is a link to a pen where I am illustrating the problem.
https://s.codepen.io/webconsult/debug/oRmQva/vWMRwadNoNvr
And here is a screenshot of how the code is rendered on iOS simulator (same on real hardware) and in Chrome respectively.
You can use Media Fragments URI
Just Append #t=0.1 to the end of the video URL
Try following code. This is work for me
<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
<source src="video/video.mp4#t=0.5" type="video/mp4">
</video>
Below code is working fine in Mozilla & Chrome. But in Safari the video doesn't play.
<video id="v-control" width="100%" autoplay="autoplay" loop>
<source src="assets/img/web home page banner.mp4" type="video/mp4"
media="all and (max-width: 480px)">
<source src="video-small.webm" type="video/webm" media="all and
(max-width: 480px)">
<source src="assets/img/web home page banner.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
I have tried preload for the video tag and If I add controls I should click on Play button. I dont need any controls for the video so I have removed controls.
If the video is not working in Safari, but works in other browsers (Chrome, Firefox, Edge), you may be running into an issue relating to byte-range requests.
Byte-range requests are when a client asks a server for only a specific portion of the requested file. The primary purpose of this is to conserve bandwidth usage by only downloading small sections of the file as needed (a video in your case). If you inspect the Safari video request, you may notice a Range header set to bytes=0-1. This is Safari's way of testing if your HTTP servers accept byte ranges before requesting a larger chunk of data.
To fix your server config, take a look at Apple's recommendations. If you need a quick fix, you could move your videos to a different hosting server that has a proper config (and make sure to update all video source references).
Safari has started (in the last year) preventing videos with audio tracks from auto-playing by default. They never specifically publicised this as far as I'm aware, however I believe it was part of the following changes:
Safari 11 also gives users control over which websites are allowed to auto-play video and audio by opening Safari’s new “Websites” preferences pane
(Source)
The only real workarounds for this are to either remove the audio track from the video, or have it muted by default.
<video id="v-control" width="100%" autoplay="autoplay" loop muted>
If your server can detect the requester's browser, you can apply this to just Safari, leaving other browsers as they were before.
In my case i'm using angular with service-worker and Safari is not loading mp4 files.
The service worker breaks the Byte-range requests, because it is like man in the middle between safari and the server, in the process the SW change the http response code from 206 to 200, this way Safari do not download the mp4.
To solve this I bypass the service worker when I need to show an mp4 video, using angular 8 is its simple, just add ngsw-bypass=true as a query string in the mp4 url and in works. ( https://....video.mp4?ngsw-bypass=true )
The Other work around also includes, adding attribute playsInline to the video tag along with muted.
For Example, something like this :
<video id="v-control" width="100%" autoplay="autoplay" loop muted playsInline>
The playsInline allows the browser to play the video right where it is instead of the default starting point.
Keep in mind that the videos you are serving need to contain the metadata required for streaming.
In my case, I was serving dynamic videos encoded in the server using ffmpeg. Using the -movflags faststart in the ffmpeg command made the videos available to be played on Safari
Added an attribute "muted"
--- video muted autoplay---
in Chrome I have everything worked and Safari is also trying
I had a similar problem with videos not playing on Safari. The problem was my web server. I moved the video to another hosting server, loaded it from there and it worked.
e.g.
instead of:
<video src='/assets/myVideo.mp4' controls> </video>
do something like this:
<video src='https://anotherServer.com/assets/myVideo.mp4' controls> </video>
I have an HTML5 video player that plays mp4 videos (I only have mp4 videos as I'm not a fancy man with fancy multiple codecs).
I would like to display an error message for when the mp4 videos aren't supported or for when the asset is missing but the whole internet just seems to be people complaining they can't find videos so it's been hard to find a reliable source.
Long story short;
How do I add error messages for when the video is missing or if the codec isn't supported by the browser.
The video code is nice and simple, the source is generated from a server side script and it looks as follows;
<video controls height ="500px">
<source src="videos/movie.mp4" type="video/mp4">
Your browser does not support this video player, please consider upgrading to a modern browser or contact your sysadmin.
</video>
If you listen for an error event on the <source> element, it will tell you if loading fails.
<source src="videos/movie.mp4" type="video/mp4" onerror="alert('Could\'nt load video')">
Though you might want to just listen from JavaScript. ;)
For some reason, my video on wordpress wont show up when I use iframe to view it. In I.E., it automatically loads the video into the windows media player versus playing through the iframe.
I am using a local mp4 for the video's. From what I can tell, there's no issues with my I-Frame code. Anyone got any idea's? I cant get it to play in the iframe!
You should not be using <iframe>'s like that. In the past it was a relatively more popular method, but extremely unreliable even back than.
What you should do instead is either encode your video's as .flv's and use flash to play them, or encode them for the 'new' html5 <video>-tag for which no additional plugins are required. To get the best results with the new tag you should convert for 3 different codecs, but H.264 gets you quite far. This is how it ends up looking if you have converted multiple formats:
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
And you can read more about it here.