I need a html5 mp3 player that support playlists. The biggest thing is that it has to have a flash fallback to support firefox because I will only be using .mp3 as my source. Heres the catch...it has to work locally.
jPlayer is an html5 player with flash fallback, that also supports playlists.
I have a blog entry describing how to get it going (invisibly) here
You can consult the documentation if you are interested in a visual playlist.
http://jplayer.org/
Related
I am trying to stream hls on safari iOS with Aframe that has three.js under the hood. But the video shows a black screen with just the audio playing. The video src is of type .m3u8. I tried to read through a lot of related posts but none seem to have a proper solution. Is it some kind of a wishful thinking getting HLS & WebGL to play on iOS? If not, can some one please help me with a solution.
A couple of discussions on the issues that are available on github:
HLS m3u8 video streaming
HLS on Safari
To your question:
Is it some kind of a wishful thinking getting HLS & WebGL to play on iOS?
Yes, wishful thinking :-) The problem/issue/bug is with Apple, not any library. No matter what the JS library, A-Frame, Three, etc, this will always be an issue on any browser in iOS (all browsers on iOS are basically wrappers for Safari), and OSX Safari.
The issue is this (from my understanding):
At some point in the history of WebGL, there were restrictions on cross-origin content (videos, images, etc). I can't find a source for this, but I remember reading it somewhere, so this might not be 100% accurate.
Recently (a couple years ago? 2015?) all major browsers came to the conclusion that cross-origin media for use in WebGL was safe. Except Apple/Safari.
For most browsers, the crossorigin attribute on a <video> element could signal that this content came from another source. In Safari, for whatever reason, this attribute is ignored or not implemented. In fact, it looks like WebKit, which Safari is based on, fixed this as far back as 2015, but Apple still does not implement it. Even Apple refuses to comment on any progress.
Possible workarounds:
WebGL on Safari works with progressive (not a stream like HLS/Dash) .mp4 videos. Check out any 360 video on Facebook (website, not app) in iOS/Safari, and you'll note the source is an .mp4.
Use HLS (or Dash), but play the video flat, without WebGL. Check out any 360 video on YouTube (website, not app), and I think they are using HLS or Dash, but the point is they stream the video, whereas Facebook doesn't.
Here's a good starting point to the real issue: link.
Here's another detailed thread: link.
https://github.com/video-dev/hls.js#compatibility
Please note: iOS Safari "Mobile" does not support the MediaSource API.
Safari browsers have however built-in HLS support through the plain
video "tag" source URL. See the example above (Getting Started) to run
appropriate feature detection and choose between using Hls.js or
natively built-in HLS support.
When a platform has neither MediaSource nor native HLS support, you
will not be able to play HLS.
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js#canary"></script> -->
<video id="video"></video>
<script>
var video = document.getElementById('video');
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
// Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
// white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
video.addEventListener('loadedmetadata', function() {
video.play();
});
}
</script>
I want to be able to record videos with audio using HTML and Javascript.
After some research i can get video streaming with getUserMedia. Also There is WebRTC for recording but as far as i understood its not yet implemented in desktop browsers (only mobile browsers support it). So now i can just capture video, but i cant save it to server or record it.
What other options do i have ?. Does anyone knows a good flash alternative or HTML5 alternative that allows me to capture and save video to server with audio and also has maximum time of recording
Full disclosure: I work for Ziggeo.
When it comes to WebRTC, here is the rundown for browsers supporting it:
on Chrome and Opera, you have to record audio and video separately and encode them yourself in JS; then, send them to your servers and transcode them using e.g. ffmpeg to mp4s and other target formats
on Firefox, you can get a webm object for video and audio combined and send it to your servers.
For all other browsers and older versions of the ones mentioned you'd need to fall back to Flash recording which usually is based on RTMP and flv.
Can anybody explain to me how are YouTube videos playing even with disabled JavaScript in browser? Is there any server side scripting or any other technique involved? Thank you very much.
Youtube serves pure mp4 files, if your browser supports HTML5 or you got any other player plugin installed, it will work this way. On cellphones without HTML5 support or Flash, you may simply download those files. Flash player implementation on Youtube does not work without js.
I see YouTube player use an Adobe Flash not HTML5 :)
Player in HTML5 (not by default) doesn't work without JS. (most YouTube buttons, options and others too)
I am currently trying to embed the m4v videos in my html webpage.
using the following code
<video controls="" height="360" width="480">
<source src="path/to/my/m4v/video" type="video/mp4">
<source src="path/to/my/m4v/video" type="video/ogg">
</source></source></video>
its working perfectly in google chrome.and it demands for an ogv video for mozilla browser.as we cant get an ogv video from our client.Also I am using it in hero framework.
I also tried to use the iframe tag used by youtube embed code.that works with webkit browser(google chrome).
but not able to play in mozilla firefox browser.I need to play m4v video in cross browsers.Is there any way or any html tag I am missing here?I explored alot but couldn't find an efficient solution.
m4v format files are not supporting by browsers, these format need player support. these files directly cannot run in browser.
like chrome, firefox, ie...etc.
Because these file format belongs to iOS operating system, developed by apple.
Read the instructions given by below link Wikipedia.
http://en.wikipedia.org/wiki/M4V
M4V - Video Supporting Features
these are the possibilities to
upload m4v files in the you tube that link we can use.
need to convert in to mp4 format all files and use in server.
need to write any script that converts the m4v files to mp4 fomat from server side.
need any builder that directly converts that m4v to mp4 formats files but it may be payable it.
You will probably need some external plugin or servcice support for your codec (m4v) since is not supported by all the browsers out there.
For a list of supported cross-browser video and audio formats I suggest you to check this documentation by MDN
Media formats supported by the HTML audio and video elements
In just a few Words, the formats you need to be 99% bross-browser are:
H.264 and AAC in MP4
Theora and Vorbis in Ogg
VP8 and Vorbis in WebM
HTML5 Video is just a convention to play a certain video formats with a new element for which browsers will implement an own player. HTML5 won’t provide players or something like that.
You have to look for the codecs and contained supported by most browsers, which, if I remember well, are mostly Theora for Video and Vorbis for audio, in an OGG container.
Then I remember that Webkit browsers will support Matroska (MKV) containers using V8 as video codec and Vorbis for audio.
My recommendation: provide an OGG file with Theora and Vorbis as video and audio codecs respectively. Inside provide a fallback using an MKV file with V8 and Vorbis and then, if you can, inside an MPG video file using Mpeg2 and MP2 (couldn’t think on something better) as video and audio codecs, fallback. Then as the last fallback, a Flash player playing a FLV video file.
<video src="thevideo.ogg">
<video src="firstFallback.mkv">
<object type="video/mpeg" src="secondFallback.mpeg">
<object
type="application/x-shockwave-flash"
src="player.swf?etc...">
<p>Download the video etc...<br />
or use a more modern browser to watch online, etc...</p>
</object>
</object>
</video>
</video>
Etc... ;-)
With this configuration, most (if not all) browsers should be able to play your video, preferring the most supported (and most modern) format. “Fallbacking” until they find a Flash Player.
For hints on what formats to support: take a look at the HTML5 Video part in Wikipedia.
Important: In your code you are refering to an absolute filesystem path, which is totally not-accesible for a web visitor. Maybe in the src you meant /video/file2.m4v.
You can use HTML5 video tag.
or
jplayer.org
or https://github.com/html5-ninja/Bootstrap-video-player-jQuery-plugin/blob/master/index.html
view about url you got complete reference .
If you're not forced to use Quicktime, the Flash based JW Player NOT free
can do Quicktime encoded MV4 if the client has Flash 10 installed.
Hence tried using the JWPlayer from the official site of jwplayer.
Will have to purchase it to get a licence key.
Enables to play .m4v video on cross browsers.
Works perfectly.
I'm looking for a web video player with which I can keep the full compatibility with iOS devices: iPad, iPhone, etc (so I would exclude all Flash video players).
Until now I've used Flowplayer but I have some problems:
the main problem is that using flv files I can start very fastly to play the video but I don't have any compatibility with iOS devices. Instead, using mp4 files, I have the full compatibility with iOS devices but before playing the video I have to wait that all content of the file has been loaded (few minutes).
So my question is: does it exist a video format that allows me to play videos very fastly and also compatible also with iOS devices?
Not talking about HTML5 just yet, lets assume you are first interested in supporting most users and legacy devices. Unless you are using an embedded player, (such as Flash), there is nothing inherent in all browsers and/or JavaScript to allow you to play a video that is standardized across these devices. If you simply reference a link to the video file, you are asking the device to natively download and decode the video file. This is why it does not typically begin playing until the entire file is downloaded. This is dependent on each device having a compatible MIME encoding configured for the file type which points to a player that the browser can invoke to handle the file. When you use something like Flowplayer, usually these Flash applications can begin playing video before it is fully downloaded because it knows how to download the video from your server over HTTP and once it has received enough of the video stream (buffered the video), it can begin playing it. Currently your best option is to use something like you have been using for most devices, and have a separate link to the mp4 for iOS devices. If you just re-encode any videos you already have in FLV or whatever older formats you have been using to mp4, you should be able to play that in a current version of any Flash based player, as Flash will work with those files as well as it's legacy formats.
I've found this resource and it seems to be very good: http://code.google.com/p/php-mobile-detect/