I am using a laravel project and i have implemented a html5 video tag. Video starts streaming whenever i click on play button but the problem is whenever i try to forward the video player for some duration then video automatically starts from beginning.
I have also disabled all javascript and css files attached but still same problem exists and there is nothing wrong with the video as this problem does not appear on other PHP projects when i use the same video..
<video controls width="100%">
<source src="http://127.0.0.1:8000/storage/elearning/3/tutorial/62a0df6b1c38d.mp4" type="video/mp4">
</video>
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>
I am going through strange problem with chrome, I am working on a web page that has 13 Mp4 Videos on page which I load using HTML5 Code as given below.
<video width="900" controls>
<source type="video/mp4" src="videopathhere">
</video>
URL of the page is http://www.htsolutions.com/beta/company/clients, when I open this page in chrome it will show 8 video thumbnails and then it will stop loading, it won't even load other pages of the website until this page is closed.
Did any one run through this isssue? well, whatever (first eight) video thumbnails are loaded do play when clicked on them, so no problem with running the videos only problem is loading entire page, this page works fine under firefox and other browsers.
I am checking this on chrome version 48.
Regards
Manoj Soni
It took long time, less views and no answer for me to get into the solution of the answer.
Chrome always run into issue when we use more than specific number of MP4 HTML5 videos on the page and hangs, solution for the same is not preloading the video, so my video tag changed to this.
<video preload="none" width="900" controls>
<source type="video/mp4" src="videopathhere">
</video>
Issue is resolved, I am putthing this answer for anybody who is running into the same problem.
Regards
Manoj Soni
I have following problem. I have embedded video on my page:
<video id="video_1" width="520" height="360" controls="controls">
<source src="http://patho/to/video.mp4" type="video/mp4" />
</video>
When i open my page i see black box. After 4-5sec play icon is being displayed.
Is it possible to see this play icon immediately ? I tried to do a progress bar or something and checked all media events -> http://dev.w3.org/html5/spec/single-page.html#mediaevents .
But it looks like this problem is not connected with my video but with quick time which need time to be loaded. Am i right ? Or there is a workaround for this ?
One thing i can do is to initialize video earlier and then just show it via js ...
Take a look at this document about preloading? If your file is huge sized, then nothing could be done.
PS: IOS has own way of playing html5 video, is hardware accelerated and displayed above browser by system hack. That's why I think there is nothing that could be done.
what you can do is use the poster setting of the video tag:
<video poster="http://link.to/poster.png">
<source ... />
</video>
this should lead to the image being displayed immediately after download of it,
then download the play button once the player and the vid are loaded.
have fun,
jascha
It sounds like the index is at the end of the file: How to get your HTML5 MP4 video file to play before being fully downloaded.