I'm creating some custom video controls for an html5 element. I've bound a click event handler to a play/pause button which calls .play() on the corresponding video.
From my research, Safari will block calls to .play() unless you are in a click handler, however it is blocking my calls to .play() despite the fact that I am triggering it from within a click handler, like so:
$('.video-container .play-pause').click(function(event){
var $video = $(event.currentTarget).parent().find('video');
if($video[0].paused)
$video[0].play();
else
$video[0].pause();
});
And the error:
Unhandled Promise Rejection: NotSupportedError (DOM Exception 9): The operation is not supported.
which is originating from $video[0].play();.
Safari Version 11.0.1 (13604.3.5)
OSX High Sierra 10.13.1 (17B48)
Any ideas?
Eugh. The solution was to use an absolute path for the video source, not a relative one.
This is wrong: <video src="assets/vid.mp4"></video>
This is correct: <video src="http://example.com/assets/vid.mp4"></video>
It's worth noting that this error occurs whenever you call .play() on a video that Safari has failed to load.
Something else interesting is that Safari requires the web server to support the byte-range requests to correctly load video files. See note here: https://stackoverflow.com/a/36299252
I recently had an issue with serving files from the php command line process instead of a dedicated web server like Apache or nginx and couldn't work out why videos were playing on the live site, but not in my development environment.
A quick way to determine this is to load the video directly from the address bar. If it fails to load, your server likely doesn't support byte-range requests.
Figured out, that Safari on Mac needs server sending content-type of video/mp4
When I tried to use direct link from document manager, which gave content-type application/mp4, this didn't work (only) in Safari.
I had same problem. The video didn't play in Safari. But apparently, when I put different mp4 file in same place, the video played successfully. I used ffmpeg tool with different settings to generate the video.
This question didn't help me but gave me the idea: FFMPEG video conversion to MP4 works everywhere except in iOS Safari/Chrome.
In short, make sure you tried some video file other than you are trying now.
Related
I am currently experimenting with the getDisplayMedia browser api: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia
I am successfully able to create a MediaStream video that captures an application, but it fails at capturing the audio (say for example I'm capturing a VLC video Running, there will be no audio track ever in the MediaStream).
I have tested that with both Chrome (83+) anf Firefox on Linux Mint and Windows, and it seems to fail everytime.
Also, when I'm trying to record audio only in Chrome (firefox not tested), it throws
TypeError: Failed to execute 'getDisplayMedia' on 'MediaDevices': Audio only requests are not supported
I have read multiple dev threads, and it seems that it is not mandatory that the created MediaStream will contain audio, even though it is asked in the options.
So my questions are:
is the audio option just complete decoration ? Because it seems
pretty useless
is there another way to capture audio ? for example with the Web Audio API ? I couldn't find any resource on that. Keep in mind that I want
to capture system or window audio, not microphone.
Thanks for your answers
EDIT: Alright, I found that there's one possibility to capture audio: it has to be with Chrome, on Windows, and capture a screen (not an app). According to the doc, it should work with Edge too. I wonder if there are other means to capture the audio without some loopback device.
I'm have the problem that video doesn't work in Safari, but works perfectly fine with Chrome and Firefox.
<video controls muted preload="none" playsinline src="/path/to/video" type="video/mp4"/>
Get fom VLC codec informations:
video h.264/mpeg-4 avc
audio mpeg aac audio mp4a
This is indeed a bug* in Safari (at least 12.0.2), which doesn't accept to fetch this 300MB video as a single Request from the MediaElement.
They try desperately to make a Range request, but your host doesn't allow such requests. You can see it by trying to seek in the video while not fully loaded in other browsers.
You could workaround that issue by either
Setting your server so that it accepts Range requests (that would be the best solution, even for other browsers).
On error, fetch the whole file through AJAX and play it from memory (as a Blob). But this means waiting for the 400MB to be downloaded.
On error, fetch the file and pipe a ReadableStream to a MediaSource's SourceBuffer using its appendStream() method. But no browsers supports it yet...
*Though I found this link which says that "HTTP servers hosting media files for iOS must support byte-range requests", so it is for iOS, but they probably have the same constraints for desktop. But that they do not support non-range requests sounds like a bug anyway as it goes against the specs.
Another possible solution for you future searchers: (If your problem is not a mimetype issue.)
For some reason videos would not play on iPad unless i set the controls="true" flag.
Example: This worked for me on iPhone but not iPad.
<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
If you haven’t solved the problem yet then go to your phone setting then choose safari and tap Clear History and Website Data, that worked for me the problem wasn’t the code but safari itself.
My application receives a RTP Stream (H264 or VP8), put it into Fragmented MP4 or WebM and send it over Websocket to my Javascript App where I display video using Media Source Extension.
Chrome works ok with both Codecs but Firefox shows a huge CPU usage, 50%-60%.
Chrome only 6%.
Javascript calls mediaSource.updateBuffer, wait for updateend and then call again mediaSource.updateBuffer. Nothing different as any example out there.
Anyone having also this problem with Firefox?
Without a lot more specific information (profiling your code, checking your browser flags and capabilities) it isn't possible to definitively say what the issue is.
I suspect that in Chrome, your codecs are hardware accelerated, and in Firefox they are not.
I have made a music player by JS. However I have noticed that in Chrome it does not load some songs, basically any song except the one that loaded with the page.
Using inspect tool, I noticed the http request stays in "pending" status and never load the track. even tho the song is in the right folder.
if the song playes if i put its full address in the browser: www.site.com/music/song.mp3
but it does not load it in the music player.
I tried to stream songs from other websites and the player in Chrome works perfectly, such as this: https://media.rdjavan.com/media/mp3/Masih-Arash-AP-Be-Hame-Begoo.mp3.
The above address works fine n the player, so somehow it is streamable.
In safari it works fine, basically it is slow since it has to download the song but then it works. But in Chrome it stays in the status and never loads.
I was wondering is it related to MIMEs? or does my code have to do something with servers? I have tried it on an actually server and also on Xammp and both have same result. I have not fixed htaccess but it seems unrelated to my issue.
UPDATE:
I have noticed that Chrome is even slow in loading the directories. for example it takes ages of chrome to open localhost/AudioPlayer/audio/. So i believe it is a similar problem to why my music player does not load tracks.
Any idea?
jPlayer songs not loading correctly using MVC method
Look at the answer I gave in this thread above. This may or may not be your problem.
I had problems with chrome and my music player, you have to allow content-range requests.
These are enabled default in other browsers. Reason why it works in .mp3 url's is because it's using default <audio> </audio> tags which support content-range requests I think
The problem is intermittent, but video.js is failing to load and play mp4's that have been cached in Chrome for OS X. Here's what I know so far:
Disable cache (while DevTools is open) allows the video to play 100% of the time on reload
If caching is not disabled, and cache is manually cleared the problem still happens
Closing and restarting Chrome will resolve the problem until the next page refresh
Appending a ?nocache=20131028-084318 to the source url does not resolve the problem.
Watching HTTP request using Charles Proxy, I see that on successful runs an HTTP request goes out to Brightcove (my video host). On failed refreshes, the request never happens.
On successful runs the sequence of VideoJS events:
loadstart
durationchange
loadedmetadata
loadeddata
On fails:
loadstart
I've tried a variety of ways of setting up the video element, including one noted here, Video.js Stalling during file load on iOS
and even the most basic setup noted here, https://github.com/videojs/video.js/blob/master/docs/setup.md The latter seems to work better; however, once the browser gets into a bad state clearing the cache and restarting the browser is required.
I'm having the same issue but in Chrome for Windows. I first noticed that it would only load when dev tools is open then I saw your question and realized the dev tools was bypassing caching.
If a user visits the page (on some browsers ie: Safari 6.1, etc...) the video will play the first time. If the user reloads the page by clicking in the address bar and hitting the 'ENTER' key, the video will not fire off it's LOADED/READY (or any other) events on the page 'reload'. This behavior does not happen if the user refreshes the page with the REFRESH button or REFRESH key combo (generally).
I bypassed my Brightcove player issues by dynamically loading the player on the page so it CANNOT be cached.
I also cache busted the Brightcove JS file for good measure.
Load player dynamically with this code:
http://support.brightcove.com/en/video-cloud/docs/dynamically-loading-player-using-javascript
Just some opinionated advice. Stay away form Brightcove whenever possible. My peers and I run into LOTS of bugs in their player as well as radically poor documentation.
I am not sure if this is specific to video.js. I am able to reproduce this problem by setting up a vanilla html5 video tag. It definitely looks to be related to some caching issue.
Currently, I am able to circumvent the problem by attaching a guid as a query parameter to the video url to ensure Chrome thinks this is a new video request. I do think there is a Chrome bug out there that needs to be addressed.
I Just found a ticket that matches what I can reproduce:
https://code.google.com/p/chromium/issues/detail?id=234779
I faced this problem and I solved it by disabling the cache to the javaScript file that contains the videojs instance options.
Add this line to your main page at the head
<script>document.write('<script src="vid.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>
Note: vid.js is the file that I put the settings in..
Another solution that I didn't try, but I think it might work, is by adding the JavaScript of the settings in jQuery (ready function).