I have flowplayer running on a page in a slight variation of the playlist demo on their site, and for the most part it seems okay.
However, when I pause the video and switch to another video in the playlist on Chrome, once in a while, it will say HTML5 video not found (it will list the current video, not the one selected).
This will proceed to break the player and the page, forcing a refresh. The message also seems to show up on page refresh sometimes, but that doesn't matter much since it will be reloaded.
I am not sure what is wrong, but I have two theories.
1) MP4 file not streamable
-possible but unlikely considering I can jump around the video easily
2) Timeout from S3
-maybe, but I don't see any errors.
Has anyone seen this/know how to debug it?
The first thing to do would be to test this in another browser. If it works ok then it will be a video compatibility issue with the browser.
Mozilla has a very good article on Media formats supported. In it it states:
The MP4 container format with the H.264 video codec and either the AAC audio codec or the MP3 audio codec is natively supported by Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. Firefox will soon support the format, but only when a third-party decoder is available.
For the best cross browser support you really need two video formats MP4 and WebM
Related
I'm currently attempting to integrate a custom audio filter on a video player handling both HLS and raw MP4 files. I'm having little to no issue integrating it on Chrome and Firefox - Safari on the other hand is not behaving accordingly. I've stumbled upon an inconsistency in the way safari routes the audio from a createMediaElementSource call.
I've created a small demo to illustrate the problem (Safari ONLY for native HLS support), I've expressedly left out any audio filter code as it has little relevance concerning the main issue :
https://codepen.io/edvincandonus/pen/ZEGVbPG
In the demo, once the audioContext is instantiated and "unlocked" via a user gesture, I create the MediaElementAudioSourceNode via audioCtx.createMediaElementSource(video) and leave it dangling (as in unconnected). As a consequence, the HTMLMediaElement will be re-routed into the processing graph of the AudioContext, and as no connections were made to the audioCtx.destination, audio playback should be missing when video playback starts.
This is the behaviour on Firefox. Chrome goes even further and blocks video playback if the MediaElementAudioSourceNode has no final destination node (try playing the MP4 from the demo on chrome)
As for Safari : this expectation is only met when the video source is a raw MP4 file - But when switched to an m3u8/hls stream, the HTMLMediaElement's audio is not correctly routed to the AudioContext as you can clearly hear the video's sound.
Is this a known safari limitation ? If not, would anyone have any workarounds to correctly access and route the audio from an HLS stream using Safari's native support for this protocol?
I've stumbled upon old stackoverflow answers indicating createMediaElementSource had always been buggy on Safari, but I figure they would have fixed it by now.
I'm using a .mp3 file, the .mp3 file plays okay when viewed directly and also when embeded using the HTML5 audio tag, however when creating the HTML5 audio tag in JS it does not play! (very strange)
I do not have this issue in any other browser/device, for example Desktop - Chrome works perfectly.
sound = document.createElement('audio');
sound.setAttribute('src', 'sound.mp3');
sound.play();
I've tested sound.canPlayType('audio/mpeg') and this produces true (so it is supported).
Perhaps there's a bug in Android - Chrome? (it is the latest version)
Looks like this is intended feature that spans more then just the Chrome browser. User interaction is required to get media elements to play.
Blink and WebKit have a setting for requiring a “user gesture” to play or pause an audio or video element, which is enabled in Opera for Android, Chrome for Android, the default Android browser, Safari for iOS and probably other browsers. This makes some sense, since mobile devices are used in public and in bed, where unsolicited sound from random Web sites could be a nuisance. Also, autoplaying video ads would waste bandwidth. Block Quote from 'blog.foolip.org'
Duplicate Threads from Other Users
Autoplay audio on mobile safari
How can I autoplay media in ios 4.2.1
Autoplay audio with ios 5 workaround?
Current Status
Developers have requested the deletion of 'mediaPlaybackRequiresUserGesture' which was reviewed and denied (for now). "We're going to gather some data about how users react to autoplaying videos in order to decide whether to keep this restriction."
Upon further inspection i found this...
"I misunderstood the outcome of the discussion (removing mediaPlaybackRequiresUserGesture) surrounding this topic. We need to keep this code in order to not break google.com while gathering data about this feature."
Google.com relies on the feature being disabled, otherwise it breaks (they didn't say what it breaks).
Original Bug Report
Try appending it to the document body.
document.body.appendChild(sound);
Though it is possible that mobile devices will not automatically play the audio or videos. If you are targeting mobile devices, autoplaying is considered bad practice since it can consume bandwidth. So it may be worth considering adding controls.
sound.setAttribute('controls', 'true');
OK, well, now that we know it won't work with audio, the only path left to you is to switch to the Web Audio API. You'll need to load the mp3 into an ArrayBuffer (e.g. using an XHR), then pass that to the decodeAudioData method, which gets you an Audio buffer that you can play back at will from an AudioBufferSourceNode.
Not every browser on every platform can play the mp3 audio format. Generally, as I would recommend, you should provide two <source> elements within your audio element, one providing the mp3 format, and another one providing the ogg vorbis format.
You can read more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
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.
I'm using the mediaelementjs gem implementing the 2.13.1 version.
Everything works fine in Chrome and Safari. However Firefox will only play the sound when trying to read a .MP4 file.
http://mediaelementjs.com/media/echo-hereweare.mp4 when using this one, the video and
sound play well (however the fullscreen button doesn't work)
http://video-js.zencoder.com/oceans-clip.mp4 but when using this one, only the sound play
and the video won't show up.
My code is very simple:
$(element).html(
'<video src="http://video-js.zencoder.com/oceans-clip.mp4" '+
'width="320" '+
'height="240"'+
'</video>'
);
$('video,audio').mediaelementplayer(/* Options */);
Is this a bug from mediaelementjs or am I missing something ?
Firefox does not support the H.264 codec (usually used in .mp4) natively, it relies on your OS decoders to play it (this currently only works on Windows, and only on Windows 7 or 8). If your OS has no decoders installed it won't play the video at all.
Chrome, IE and Safari include their own H.264 decoders. Firefox doesn't because the H.264 codec isn't royalty-free so Mozilla would have to pay to include a H.264 decoder in Firefox. Furthermore it is against the foundation's open-source philosophy to include a very patented and very non-free (as in freedom) codec in its free and open source browser.
A solution is to provide a flash-based alternative as a fall-back. Another solution is to provide the file in two formats, e.g. H.264 and WebM which covers all large current browsers.
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/