Adobe has said that it plans to phase out its Flash Player plug-in by the end of 2020. People said that all Flash content should have been migrated to other technologies like HTML5. I agree more or less, but how ready is HTML5 when in comes to replacing Flash entirely?
Let's take an everyday example - video playback on web.
On Flash, I can just embed one player for all the videos on a website and just change the paths to link to different FLV videos(or MP4's) for different videos on the site. As long as Flash is installed on client side, I need not worry much which browser they are using.
However with HTML5, to be cross-browser compatible, AFAIK, I need to have three video files (three different formats of the same video - MP4, WEBM and OGG).
<video id="video" controls preload="metadata" poster="img/poster.jpg">
<source src="video/v1.mp4" type="video/mp4">
<source src="video/v1.webm" type="video/webm">
<source src="video/v1.ogg" type="video/ogg">
<!-- Flash fallback -->
<object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/v1.mp4" width="1024" height="576">
<param name="movie" value="flash-player.swf?videoUrl=video/v1.mp4" />
<param name="allowfullscreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashvars" value="controlbar=over&image=img/poster.jpg&file=flash-player.swf?videoUrl=video/v1.mp4" />
<img alt="My video" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
</object>
<!-- Offer download -->
Download MP4
If I have 80+ different videos on the site, I will have to host 240+ video files on the server, which is quite troublesome to prepare and manage the files. I hate to transcode a video to different format every time before putting the video content on the server.
It is now mid-2017, and HTML5 video is nothing new. I wonder if there is any new cross-browser compatible method/hack to embed video playback using just one video format?
HTML5 is very ready for video. The advantages of using HTML5 over Flash is also to have playback on mobile which is definitely a must in 2017. To the solution to your issue the best you can do is use MP4 (encoded with h264 and aac). This video format is supported on all browsers (webm and ogg are only supported on some browsers).
MPEG-DASH is the new "one standard to rule them all" but it's a way off native support across all browsers at the moment. One answer would be to use a player like Ooyala's or Shaka.js to give you a polyfill, but that's going to be limited in support for older browsers.
If you're worried about managing assets there are Media Asset Management systems that can take a single asset and produce a variety of versions (eg mp4, webm, ogg as well as fragmented mp4 such as HLS and Dash) or you could roll your own using something like ffmpeg for transcoding or use a service like Azure Media Service
Related
I need to develop a web application, it needs to support IE9 as well as iPad and Android tablets. The problem I am facing is that the client is required to show live streaming video on all the pages. How can I implement live streaming video in HTML5?
I recommended you to use Wowza Media Server ( Ofcourse there are several streaming servers are there. Wowza delivers video/audio with great performance and service ) I am using it for my projects. It also supports opensource players like flow player, Jw players etc.. Install Wowza Media Server on your machine and create a live application on it and start broadcast. You need an encoder for live streaming, You can use Adobe Flash Media Live Encoder for testing. Wowza can able to broadcast the videos to iphone, Webpage, etc.,
Try the code
<video id="movie" width="" height="" preload controls>
<source id="srcMp4" src="video.mp4" />
<source id="srcOgg" src="video.ogg" />
<object id="flowplayer" name="flowplayer" width="480" height="352"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf"
type="application/x-shockwave-flash">
<param name="movie"
value="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"clip":"http://domain.com/video.flv"}' />
</object>
</video>
The MP4 format is provided first, due to a previous bug in iPad which only sees the first source listed.
If the browser can't play the MP4 version, it tries to load the Ogg version. If that fails, it uses Flowplayer (flash) as a fallback.s
I am designing a site for an ad production company that want to be able to upload location scouting and casting videos. I have figured out how to get the data out of sql and into the browser with proper headers.
Now my issue is - what is the best way to display video at present. I need it to work on iPhones, iPads, Safari and Firefox. I don't care about IE at all.
I don't mind restricting them to uploading in only one video format if that helps. Meaning Quicktime .mov only or .m4v only - whatever works. Can't use Flash as iPhones and iPads are involved.
I also have no issue accommodating each different browser with different code. I just need to know which method is best for which platform/browser.
EDIT:
I have figured out how to display the video from the database in the computer browsers I care about (excludes MSIE). Now I need to figure out the iPhone. To test, I put the files into the server's files system and they all play from there via the html5 video tag. So the iPhone is capable of playing the clips' formats. The issue is apparently passing that data to the iPhone from mySQL... Currently, my php file that retrieves the binary data and sends it to the browser specifies the following headers:
header("Content-length: $audioLength");
header('Content-Range: bytes 0-'.$audioLength.'/'.$audioLength);
header("Content-type: ".$mimeType);
where $audioLength is the file size in bytes captured on upload
$mimeType is the mime type as reported by the browser at upload - both values are passed to the retrieve_audio.php script form the database along with the binary data.
What other headers may be necessary? How would I find out what the difference is between getting the file from the filesystem versus the database?
Is is possible the issue is that the iPhone doesn't retrieve the data until you press the play button? As a last resort, I could have the PHP code write the file(s) to the filesystem, but that is duplication of data that I would like to avoid, if possible...
Thanks,
M
Check out http://diveintohtml5.ep.io/video.html for great info on HTML5 video and different formats.
Simplified short answer: Firefox 4 supports Ogg (Theora/Vorbis) and WebM; Safari (desktop and mobile) supports MP4 (H.264/AAC). Try using the HTML5 <video> tag like this:
<video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
(Example from site linked above. Seriously, it's a really good read, and it will also tell you how to make sure your video does work in IE, Chrome, etc.)
EDIT If you absolutely need to only use one video format, your best bet is probably MP4/M4V with H.264 video and AAC audio. Safari (desktop and mobile) can play it in the <video> tag, and Firefox will be able to play it in a Flash container. It's not ideal, because I think you'll have to do some browser sniffing to make sure iOS doesn't get Flash and Firefox does, but you'll want something like this:
<!-- Safari and iOS -->
<video width="320" height="240" poster="poster.jpg" controls>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<!-- Firefox / other -->
<object width="320" height="240" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="player.swf">
<param value="true" name="allowfullscreen">
<param value="always" name="allowscriptaccess">
<param value="file=video.mp4&image=poster.jpg" name="flashvars">
<embed
width="320"
height="240"
flashvars="file=video.mp4&image=poster.jpg"
allowfullscreen="true"
allowscriptaccess="always"
src="player.swf"
type="application/x-shockwave-flash"
>
</object>
Even if you go this route, though, I'd still read the Dive Into HTML5 page for more info about the appropriate codecs to use, how to encode the video, and various problems to look out for.
Unfortunately there is no single format that works well on such a wide variety of devices. You'll need to take whatever format is uploaded and convert it into a number of different formats. You might want to look into a service like http://www.livetranscoding.com/ to do the heavy lifting (note, I've not used their services and I don't know if there's a way to get it to work with non-live streams).
I'm looking for a way to broadcast a live video taken from a webcam or camera rooted to a PC.
The broadcast should be displayed in a HTML5 page using the tag (which support rtp, and rtsp I think).
The user viewing the stream should not have to install any plug-in or video player such as QuickTime.
I need the video to be in mp4 format such as: rtsp://www.mywebsite/streaming/video.mp4
This would be the link I'd put as the src of the html 5 video tag.
So I'd like to know if it's possible, what are my options to do such things.
It's possible. But you will have major problems if you're looking for cross browser support. What you can do is offer HTML5 video to the browsers supporting it and then offer QuickTime for browsers not supporting it.
<video src="stream.mp4">
<!-- Don't support <video> -->
<object>
<param name="src" value="video.mp4" />
<param name="autoplay" value="true" />
<param name="type" value="video/quicktime" height="256" width="320" />
<embed src="video.mp4" height="256" width="320" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" />
</object>
</video>
Also see: Streaming via RTSP or RTP in HTML5
I don't think it is possible now to "cheat" the HTML5 browser to encapsulate the live video stream to a ".mp4" file.
I believe HTML5 will consider live video support in a near future.
What you can do is just wait. :)
For maximum compatibility, here’s what our video workflow will look like,
Make one version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container & Make another version that uses WebM (VP8 + Vorbis) or Theora video and Vorbis audio in an Ogg container.
I think this combination solves your problem & it plays on most of browsers.
You should required at least two versions of Video to play in all the browsers.
I've got a set of videos that are going to be posted on a new site I'm developing, using our new html5 player. I know Firefox only supports .ogg format, whereas most others (including eventually IE9) support h264.
I'm looking to tap into the experience of the crowd here: has anyone had any luck with a single video format across browsers? Or am I doomed to double-encode everything? It just seems a shame to waste space on having two copies of each video because we can't standardize our codecs.
Thanks in advance!
PS (Flash player isn't really an option as a fallback, partly on principle and partly because of a rather large mobile userbase.)
From my personal experience with HTML5 Video, I create mp4, ogg, and flv file formats, and use the following implementation:
<video id="movie" width="" height="" preload controls>
<source id="srcMp4" src="video.mp4" />
<source id="srcOgg" src="video.ogg" />
<object id="flowplayer" name="flowplayer" width="480" height="352" data="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf"
type="application/x-shockwave-flash">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"clip":"http://domain.com/video.flv"}' />
</object>
</video>
The MP4 format is provided first, due to a previous bug in iPad which only sees the first source listed.
If the browser can't play the MP4 version, it tries to load the Ogg version. If that fails, it uses Flowplayer (flash) as a fallback.
I know you're looking for a solution without flash as a fallback, but in my opinion, we're just not there yet. People are still using IE6 for crying out loud!
HTML5 Video is still in the making, and until it's completely stable across all browsers and platforms, you'll need to provide a "workaround" for different scenarios.
For mobile, perhaps you can detect the User-Agent and go from there...
Hope this helps
Probably WebM if not Ogg. WebM's patents are owned by Google but have been released from that. Ogg is probably OK but there are concerns. H.264 is a patent trap waiting to happen.
We have a somewhat similar problem.
<video id="movie" width="320" height="240" preload controls src="demo.mp4" />
We use the h.264 format, which I suggest you should do as well since you have a large mobile userbase (lots of iPhones I suppose).
However, WebM is the open format for people with principles ;) I can only hope MS and Apple will support it in the near future.
I'm working on a very small site, with almost zero budget as a favor for a friend. She wants to put a short audio and video clip on the site (both clips are under two minutes). The audio is currently a 1.6 MB AAC (.m4a) and the video is a 30 MB H.264 (.mov).
What's the current best practice that's going to be the easiest for me, while still creating a good experience for the users? Should we upload the video to youtube or vimeo and embed? There's probably some simple audio player I could download. I have flash, so could make an FLV; I could convert the m4a to an mp3, etc. I could just link directly to the raw files....
Outsource it.
Youtube
Blip.tv (FAQ)
Vimeo (Basics)
Many popular video sites use Blip.tv
Thatguywiththeglasses
Cinemassacre
And others use Youtube
Screwattack
In terms of being modern and standards compliant for video embedding, Video for Everyone is probably the best way.
<!-- “Video for Everybody” by Kroc Camen <camendesign.com> cc-by -->
<video width="640" height="480" controls="controls">
<source src="__MY_VIDEO__.ogv" type="video/ogg" />
<source src="__MY_VIDEO__.mp4" type="video/mp4" />
<object width="640" height="500" type="application/x-shockwave-flash"
data="__FLASH_PLAYER__.swf" flashvars="file=__MY_VIDEO__.mp4"
> <param name="movie" value="__FLASH_PLAYER_.swf" />
<param name="flashvars" value="file=__MY_VIDEO__.mp4" />
<!--[if gt IE 6]>
<object width="640" height="495" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="__MY_VIDEO__.mp4" /><!
[endif]--><!--[if gt IE 6]><!-->
<object width="640" height="495" type="video/quicktime" data="__MY_VIDEO__.mp4"
> <param name="src" value="__MY_VIDEO__.mp4" />
<!--<![endif]--><p>
<strong>No video playback capabilities detected.</strong>
Why not try to download the file instead?<br />
MPEG4 / H.264 “.mp4” (Windows / Mac) |
Ogg Theora & Vorbis “.ogv” (Linux)
</p><!--[if gt IE 6]><!--></object><!--<![endif]-->
<!--[if gt IE 6]></object><![endif]-->
</object>
</video>
A fully commented version is available at the link above.
This uses the video tag if it's supported, but as Firefox and Safari both support different formats (Ogg and Mp4) you need to have a couple of different versions of the video files.
This works on every browser, from IE6 to the iPhone, and from Chrome to Opera including everything in between.
For audio, the audio tag is the most modern, though I'm not sure about browser support at the moment.
Uploading to a service like YouTube, Blip.tv, or Vimeo is good, but you'll have to settle for them tossing in "related videos" or other ads on your content, and you'll be forced to stick with their player/branding.
You could get the JW FLV Media Player, and play the .mov through flash. And actually, if you go with blip, they will host the file and give you the absolute path to the .flv itself - meaning you could load it directly into your local copy of JW FLV Player, and likely bypass their ads/related content.
Another nifty thing to consider would be the jQuery Media Player. It quickly converts markup/css into a media-player driven by the powerful jQuery framework. Using this with the free hosting provided by Blip.tv (who again give you direct access to your .flv files) would be a great solution too.
for the video, I recommend to use youtube. you can embed into your pages without sacrificing spaces and bandwith.
For the sound, i would recommend to use mp3 (not aac since not everybody has aac) and then you can put flash mp3 player (try this : 5 best flash podcast players)
For mp3, if it is a speech or just human talking about something, you don't need to make stereo, mono is more than enough. You can edit using Audacity (free-open source software). I guest (from my past experience) 1 hour speech could be 5-6 MB mono mp3 (about 96Kbps if i am not wrong)