This is my HTML:
<video id="background-video" autoplay loop muted poster="">
<source src="{{ asset('media/video/video.mp4') }}" type="video/mp4">
</video>
The video should autoplay when visiting the website, and it works perfectly in Chrome and Firefox. But not Safari. This problem only occurs when visiting the video through localhost. Opening the video as a normal file in Safari, straight from my disk, plays it fine.
This makes me think this problem occurs somewhere in Laravel failing to serve the MP4 for Safari through localhost.
Is this a known issue, and if so, how to solve it? I am using Laravel v9.
Edit:
So, in Safari:
http://localhost:8000/path/to/video.mp4 -> fails
<source src="{{ asset('/path/to/video.mp4') }}" type="video/mp4"> (code) -> fails
file://mysites/path/to/video.mp4 -> works
Solved it. I was using the command php artisan serve to test my website. This opens a PHP/Laravel development server. But this server is poorly configured and cannot handle the 'Range Bytes' Safari requires to stream MP4.
Just place your Laravel project on a local Apache server and test it through there.
Related
I have a site where I host live streams, and now our programmers restricted m3u8 files to be played only with specific user-agent otherwise it return 403 error.
We tried using GrindPlayer, but their support told us they do not support custom user agent.
Do you guys know any HLS HTML5 or FLASH player which support useragent to be set while requesting m3u8 file.
We are forced to use VLC webapp, and Chrome users can't watch videos.
This is major issue to us.
EDIT:
I just figured out this code
<video width="352" height="198" controls>
<source src="playlist.m3u8" type="application/x-mpegURL">
</video>
Works great in Android, Egde, IE etc, but not in Chrome.
Why Google Chrome makes everything so difficult?
I have a live stream from 2 cameras. Code looks like this
<embed
id="QTlive"
src="empty.mov"
qtsrc="rtsp://IP:ADDRESS/live/video/ch1&authbasic=LOGINPWD="
width="800"
height="600"
scale="tofit"
autoplay="true"
loop="false"
controller="true"
wmode="transparent"
type="video/quicktime"
pluginspage="http://www.apple.com/quicktime/"
>
On server it's working perfect with Safari but on Firefox i got blank, white box. When i run local file .html via Firefox it's working but on remote server it's not.
I have QT installed on Firefox and using Mac.
Any ideas how to solve this problem ?
so we're building a video site with a html5 player (and backup flash for windows).
But what's really stumping me is when i view this file in firefox it plays;
http://www.roguefilms.com.local/media/uploads/2010/07/1495/8_lg-poke.mov (stored locally) but when its in the html video tag is does nothing. It shows the poster but doesn't play the video. It doesn't even show the 'Sorry - your browser is not supported!'
I know ff prefers ogg and we can use the flash backup player but if it can play it as a ht64 .mov without the player why can't it with? Seems a bit daft?
If anyone knows anything it would be great...
<video controls="controls"
id="myVideo"
src="/media/uploads/2010/07/1495/8_lg-poke.mov"
poster="/media/uploads/2010/07/1495/still.jpg"
height="360"
width="640">
Sorry - your browser is not supported!
</video>
best, Dan.
When you just load the .mov file, the content-type your server provides causes Firefox to check and see and see if any plugins handle the content. In this case, QuickTime handles it, which is why it plays.
The video tag doesn't launch plugins to play content, however.
Firefox doesn't support h264, as you mentioned, although am surprised it plays the video in its own, unless its forcing it into a Flash player automatically, which is possible.
To get the "sorry" message to display you'll need to use the source element:
<video controls="controls" id="myVideo" poster="/media/uploads/2010/07/1495/still.jpg" height="360" width="640">
<source src="/media/uploads/2010/07/1495/8_lg-poke.mov">
Sorry - your browser is not supported!
</video>
I wrote this back in April of last year, but it might help: html5laboratory - using the video element.
We once had a similar issue with the web server (Apache, in our case) not sending the proper MIME-type for the video file and Firefox first downloaded it completely before starting to play it. Is it possible that the player would work if you just waited long enough? You could use Firebug to see if your browser transfers anything.
Hey all,
I've got an HTML5 video on a page. When tested locally, Chrome, Safari, and Opera work beautifully. Firefox plays it, but doesn't loop as efficiently as the others. The real problem is when it's tested off a server. Firefox doesn't play the video, but recognizes there is one there. I was wondering if all that open ended three-different-ways syntax can be swung in Firefox's favor.
Thanks!
HTML:
<video id="vid_home" width="780" height="520" autoplay="autoplay" loop="loop">
<source src="Video/fernando.ogv" type="video/ogg" />
<source src="Video/fernando.m4v" type="video/mp4" />
Your browser does not support this videos playback.
</video>
take out the closing tag from your source tag, it should work then
I have an ogg/audio file converted from mp3 using Alt WAV MP3 Ogg Converter.
When I drag and drop the file in Firefox or in Google Chrome, the audio plays nicely.
But when a use the following code to place the file inside a page it only works on Chrome.
My code is simple as that:
<audio controls>
<source src="foo.ogg" type="audio/ogg">
</audio>
Someone can tell me why?
Thanks
I think you can find your answer here.
In my case I had to add MIME types to our nginx server.
Because this works on IE:
<source src="foo.ogg" type="audio/mp3">`
And this works on Chrome, Mozilla, Safari, Opera
<source src="foo.ogg" type="audio/ogg">