I am having a bit of trouble implementing a video into my site.
I use this block of code:
<video id="video-background" poster="/video/video-poster.jpg" autoplay loop muted playsinline>
<source src="/video/video.webm" type="video/webm">
<source src="/video/video.mp4" type="video/mp4">
<source src="/video/video.ogg" type="video/ogv">
</video>
When opened in any browser other than Safari the video loads instantly. I haven't seen it take longer than 5 seconds before it is playing.
When opened in Safari the video takes close to a minute to begin playing (might even be longer).
Can anyone add some reason to this madness so I can:
1) Improve performance on Safari...
2) Get a good excuse to my manager...
I have checked all the video declarations - they are all are working videos.
I have tried moving the order that the videos are declared.
Thanks, Jason.
My assumption would be that the video has default encoding - usually with an mp4 video the final step is to write the MOOV atom that contains the metadata and information about the frame locations etc at the end. This means until the file has been completely read the browser doesn't have all the information available to it.
You can fix this using FFMPEG (open source, free, downloads available for most platforms) and doing a second pass on the video to move the MOOV atom to the front:
./ffmpeg -y -i source.mp4 -movflags faststart dest.mp4
There could be a problem with video encoder. Just run this program to re-encode your video.
Link
Hope this helps.
Related
I’ve tried setting them to be true and changing the order in some hope it will help. So far it’s not working I’m sure the videos silent but I muted it anyway. I want it to autoplay and loop. It does neither.
<video loop autoplay muted class="VideoMain">
<source src="A.mp4" type="video/mp4">
</video>```
I don't have A.mp4, but after trying your code with another MP4 video, it seems to work fine.
<video loop autoplay muted class="VideoMain">
<source src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
</video>
Since your code is fine, the problem must be with the video file.
Ensure that your video file is not corrupt and can be accessed.
Your MP4 is not from a live stream (ie: is not a fragmented-MP4, that needs MSE to play).
Ensure the MP4 is containing H.264 video (and AAC audio, if got sound).
MP4 can sometimes have H.265 video codec. Only supported browser is Safari (Apple).
Use MediaInfo to check video details and then confirm if your browser supports that setup.
Use a Hex editor for your OS to check the video file's bytes. A working MP4 should show moov in second or third line. If not, then video is not playing because metadata is not available (needs moving from back of file to the front).
Also check that you have saved and are accessing your site through the development version. All are common mistakes we make in the heat of development.
I am trying to add a web video that has alpha transparency to a website. The video is in .WebM format so no problem there. When checking it out on safari with the latest iOS I realized that Apple doesn't support WebM. After researching it a bit I keep running into dead ends.
I tried converting it into an HEVC encoded video but it still doesn't work. I tried re-exporting the video file from Premier with the format Apple ProRes 4444 XQ .mov and that didn't work either.
My code is just standard HTML5, with the second 2 video sources being both that I tried and could not get to work on Safari.
<video width="600" autoplay loop muted playsinline>
<source src="movie.webm" type="video/webm">
<source src="movie_HEVC.mp4" type='video/mp4; codecs="hvc1"'>
<source src="movie_ProRes4444xq.mov" type="video/quicktime">
</video>
This CSS Tricks article shows a great example of what I am trying to accomplish. It even has a great guide on how to accomplish this task. However, one of the main steps on the guide requires a Mac for it's video encoding ability. I am on Windows. Is there a workaround or any other ways of achieving this?
Thanks,
Chase
This CSS Tricks article shows a great example of what I am trying to accomplish.
I am on Windows too so I cannot confirm a working Answer, but try...
(1) Test by using only one source for iOS (it must be either MOV or MP4) with "hevc" as the codec.
<video width="600" autoplay loop muted playsinline>
<source src="movie_HEVC.mov" type='video/quicktime; codecs="hevc"'>
</video>
(2) On Windows, try using FFmpeg to encode Pro-Res 444 video.
ffmpeg -i inputfile.mp4 -c:v prores_ks -profile:v 3 -qscale:v N -vendor apl0 -pix_fmt yuv422p10le -s 800x600 -r 30 output.mov
I have an application which needs to embed videos (mp4, HTML5). The catch is that these videos can be located anywhere on the server hosting my application and not just in the directory of the app. If that were the case, my code would look something like this:
<video preload="auto" controls>
<source src="assets/media/video.mp4" type="video/mp4">
</video>
In my situation, my videos can be living in any location such as C:/Users/media/video.mp4 which would make me do something like this instead:
<video preload="auto" controls>
<source src="C:/Users/media/video.mp4" type="video/mp4">
</video>
The problem I run into is that Chrome (and other browsers most likely) obviously block this sort of external access. My workaround for this has been fetching videos at the server level (Tomcat server), converting them to a byte array, and giving that to my HTML. My Angular code sanitizes the byte array and then serves it to my HTML.
Angular:
this.http.get(url).subscribe(data => {
this.mediaSrc = this.sanitizer.bypassSecurityTrustResourceUrl(data);
});
HTML:
<video preload="auto" controls width="75%" height="50%">
<source [src]="mediaSrc" type="video/mp4">
</video>
This strategy works some of the time. However, every so often my video completely stops working and doesn't display in Chrome. This only happens some of the time and seems to be completely random. Almost as if chrome runs out of memory and or blocks the video if it doesn't like it. Loading the page in a new tab however completely fixes the problem.
My question: is there a better way to deliver video from the server level or is there something I can fix with my current implementation so that I don't run into the issue mentioned above? I would love to go into my issue more but I really can't put my finger on what is causing this issue to randomly occur and only on a given tab of a given browser.
Video not working was fixed by using .webm videos on Chrome instead of mp4.
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>
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.