Hi I have use video js and videojs-contrib-eme to play encoded media which is delivering from a cdn. Right now everything works fine in chrome but in Safari for some encoded videos, the duration jumps directly from a higher value to 0. This is for HLS mode video.
Tried upgrading video js versions but nothing worked
Related
This video spreading across Discord is very intriguing...
The same webm file behaves as follows in the following browsers:
Browser / Player
Message
Chrome
"Discord detected on Chromium/Electron"
Firefox
"Discord detected on Gecko (Firefox)"
VLC
"Discord detected on Gecko (Firefox)"
Media Player Classic
"Discord detected on Chromium/Electron"
Edge
"Discord detected on Chromium/Electron"
Safari
Play bar loads but only plays first frame of video.
Epiphany
Play bar loads but won't play at all.
Edge (Legacy)
Won't load/play
IE11
Won't load/play
Windows 10 Movies and TV
Won't load/play
I'm well aware that the "Discord" part of the message baked-in to the video, but what about the rest?
I had originally suspected that the .webm file was somehow switching to a streaming method and using server-side headers to influence the video content, but I tried in a VM in airplane mode and it still worked.
My second thought is that since .webm-capable browsers can be split up into two groups: Chromium-based and Gecko-based, that this video has multiple video sources embedded and is taking advantage of a very specific browser incompatibility, like a magic trick that forces you to select a card.
one of the user of the app I work for has an issue, all the video she upload doesn't work in an HTML5 video player, except on Edge and Safari for iOS (and if it works there I assume it could work in other browsers)
The video can be played in our react-native app or after being downloaded, but not directly using the S3 or cloudfront link
Since the vieos from the other users work, I'm assuming it's related to encryption and S3 specifications, does anyone have met this problem and found a solution ?
EDIT: forgot to put a sample link
https://video-reetags.s3.eu-west-3.amazonaws.com/compressed/aed0a512a419334fe5d0c0c6fb4094a21610642052.mp4
Since the videos from the other users are working fine, I'm assuming it's related to encryption and/or S3 specifications...
No, the problem is not encryption or S3 server issues.
Your MP4 container has video in HEVC format (aka H.265), which is not supported in Chrome or Firefox. You should still be able to hear the sound part since AAC audio is supported.
Playing the video is possible with React-Native and other (native) video players because they rely on the O.S running the player App to decode video. If a browser brand didn't buy a license for HEVC then that browser cannot play it.
Solution:
Re-encode such videos to MP4 containing H.264 with AAC audio (...not H.265 with AAC).
Re-encoding takes time but it's the only way for now. Either the user does it before any uploading, or your own app accepts any file and re-encodes the "not supported" ones on server-side (eg: using FFmpeg or GStreamer tool).
I've tried a bunch of things to no avail. Setting the src of an audio element to the following base64 webm dataurl snippet and playing it works in most browsers, but is failing in Safari. Pasting the snippet in the location bar even works in Chrome.
https://gist.github.com/mayorbyrne/99e47f58eefcfe72e84e3e320d136c2c#file-gistfile1-txt
I am able to play a base64 encoded mp3 dataurl, as the following fiddle I found in another response works: https://www.jsfiddle.net/apo299od -- In addition, I've tried replacing the beginning of the snippet data:audio/webm with data:audio/mp3 (works in Chrome, etc), and that moves me further along, but the audio doesn't actually play, it just flashes the audio symbol in the browser for a quick second.
Just wondering if I am spinning my wheels here, or if there is a way to get this snippet playing in an audio element on Safari.
Safari on iOS doesn't support the Vorbis / Opus audio codecs in WebM and on desktop only via third-party extensions like the VLC Web Browser plugin. Safari on iOS 11+ / macOS High Sierra+ can play Opus only if it's in a CAF container.
Note: Safari on iOS supports low-complexity AAC audio, MP3 audio, AIF audio, WAVE audio, and baseline profile MPEG-4 video. Safari on the desktop (Mac OS X and Windows) supports all media supported by the installed version of QuickTime, including any installed third-party codecs
source: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html
Safari can support Ogg Opus files with WebAssembly decoding. You can see the demo and code below. Not as simple as using an <audio> element, but you will get faster, low-latency playback using the Web Audio API:
https://github.com/AnthumChris/fetch-stream-audio
I'm trying to serve some video content from a webserver, with the intention of supporting a reasonably wide set of browsers.
For iOS, as far as I can tell the way to go is to use HLS (HTTP Live Streaming) whereas on the desktop (and I guess Android?) MPEG-DASH is the state of the art. As a fallback I can provide a few static videos.
I've got this working on iOS with HLS and Chrome, Firefox, Opera, and Edge on desktop, but Safari on Mac just shows an activity spinner when I press play. As far as I can tell, this is because Safari tries and fails to use DASH as the playback method despite lack of Webm support and HLS being listed first.
For MPEG-DASH I have used Webm with VP9 and Opus, and my <video> tag looks something like this:
<video controls style="display:inline-block;max-width:174.22vh;max-height:98vh;width:98vw;height:55.125vw;background-color:#ccc;" preload="auto" poster="my-preview-image.jpg" data-dashjs-player>
<source src="myvideo/hls/playlist.m3u8" type="application/x-mpegURL">
<source src="myvideo/dash/manifest.mpd" type="application/dash+xml">
<source src="myvideo/myvideo-vp9.webm" type="video/webm; codecs=vp9,opus">
<source src="myvideo/myvideo-vp8.webm" type="video/webm; codecs=vp8,vorbis">
<source src="myvideo/myvideo-h264.m4v" type="video/mp4; codecs=h264,aac">
</video>
And I'm just importing the reference DASH implementation using
<script src="dash.all.min.js"></script>
I'm generating the HLS and DASH streams using ffmpeg from a high-quality master video exported from Final Cut Pro. The static Webm fallback files are also generated using ffmpeg while the H264 static fallback file is a lower-bitrate export from Final Cut Pro.
Is there a way I can either:
Tell DASH to respect the order of the sources and not jump ahead of the HLS stream
Or, not kick in if video/webm; codecs=vp9,opus is not supported by the browser.
Finally, if neither of those are possible, can I support multiple different codecs simultaneously with DASH? i.e. can I provide both VP9 and H264 DASH streams and have it pick VP9 over H264 where supported and otherwise fall back to H264 (higher bitrate or lower quality)? How would I go about producing that stream data?
From what you have shared, your browser will use the dashjs player when it encounters the video tag with the 'data-dashjs-player' attribute and the DASH player will focus on the formats it supports which do not include HLS.
As a crude solution you could check whether the browser can play HLS and use the native video tag if it can and your DASH player if it does not. Checking for HLS playback is a little undefined but the below approach appears to work at this time:
document.createElement('video').canPlayType('application/vnd.apple.mpegURL')
This should return 'maybe' on a browser which can play HLS (only Safari at this time AFAIK) and nothing if it can't - I just tested it on Safari and Chrome and it seems to behave like this.
Its worth noting that dash.js should be able to play MPEG DASH files on safari so it may be worth looking into the console or logs to try to find why it will not play your DASH video.
I am using video.js to play mp4 video files.
It works fine in Chrome & Safari, but not in IE
Here is a link for a sample page:
http://www.shafan.co.il/gsPedia/Templates/Shafan/DisplayItem_NEW.asp?WordID=4485&Word=&CategoryID=143
The page is in Hebrew... Sorry... But you can clearly see where the video box is...
Thanks!!
check out the source on [http://videojs.com/](line 92). their video works in ie. i played a little with the plugin on localhost, and came across the same issue... try setting up the video plugin manualy (by running js code after video tag), as they did on their homepage (line 99). chears.