I know in IE 9 HTML5 is possible. How does one best play video in IE 8 or less? The video formats I have are .mp4 and .ogv version for each video.
I have tried using a flash container but it does not seem to play the video although I do see the container and the controls.
I tried using an Active-X container and the same thing. I see the container, but no video plays. I then realized that this will only play .wmv.
Here is my code for the Flash container. Any advice on why it might not be working?
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="550" HEIGHT="400" id="myMovieName">
<PARAM NAME=movie VALUE="movies/cars/cars.mp4">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED href="movies/cars/cars.mp4" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="myMovie" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
You are embedding a Flash container, but you are not linking to a Flash file - this cannot work. In order to play videos in a Flash video player, you need to link to an actual Flash video player SWF, like FlowPlayer (there is a free version), which then connects to the web server to play the video (you can use mp4s, but not ogv).
In order to use video in HTML5, you can use the <video> tag.
But HTML5 video is not yet supported by all browsers, and neither is Flash (at least not on iOS devices).To make sure anyone can play your video, use a combined solution (HTML5 video with Flash fallback). There are free libraries which do this, like Kaltura and VideoJS (site currently seems to have some problems, but it's there).
Related
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
I am trying to get a movie uploaded from a mobile device to play in a browser.
It works fine in Chrome and FF and IE9(compatibility mode) but I cannot get it to play in IE9 not in compatibility mode.
My embed code is:
<video id='vid' class='video' width='274' height='169' controls='controls' preload='load' autoplay='autoplay'>
<source src='/videos/vid1.mov' />
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" >
<param name="src" value='/videos/vid1.mov'>
<param name="autoplay" value="true">
<param name="loop" value="false">
<param name="controller" value="true">
<embed src='/videos/vid1.mov' width="274" height="169" autoplay="true" loop="false" controller="true" pluginspage="http://www.apple.com/quicktime/"></embed>
</object>
</video>
At first I was just trying the Html5 embed code, but that didn't work, so switched it out for object and embed which didn't work either.
I found that I can combine both here: http://www.w3schools.com/html/html_videos.asp
but still it doesn't work anyway.
After spending 2 hours googling and trying different variations of this I need help!
IE9's HTML5 specs only support H.264 video encoding, so it's worth checking if the .mov was encoded properly
http://blogs.msdn.com/b/ie/archive/2010/04/29/html5-video.aspx
It could also help to supply at least 2 formats of your video, as not all browsers support one particular format. Perhaps .mp4 and .mov? If you're really ambitious swap .mov with .ogv, add a flash-based fallback as your object tag and you should be pretty well set.
change the mime type (as the server delivers it to the browser) from video/quicktime to video/mp4. Simplest way to do this, would be to add this to your .htaccess file:
AddType video/mp4 .mov
Everything should be good once you have this in place. The only other thing you'll likely see is videos coming from an iPhone being rotated 90 degrees to the left. This is the raw format stored by iOS. You'll have to take care of that on the iPhone or the server
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 have HTML page where windows media player is embedded. It works very well in all browsers on Windows, but when trying to open in Firefox on Mac OS, it fails to open.
Is there any alternative method which can be controlled using Javascript or HTML or do I have to install Window Media Player support for Mac OS?
Try streaming with flash as a fallback, or use the <video> or <audio> tag, that Safari supports.
If you are trying to stream video in a way that works consistently on every browser, you should look into Video For Everyone:
Video for Everybody is very simply a chunk of HTML code that embeds a video into a website
using the HTML5 element which offers native playback in Firefox
3.5 and Safari 3 & 4 and an increasing number of other browsers.
The video is played by the browser itself. It loads quickly and doesn’t threaten to crash your browser.
In other browsers that do not support , it falls
back to QuickTime.
If QuickTime is not installed, Adobe Flash is used. You can host locally or embed any Flash file, such as a YouTube video.
The only downside, is that you have to have 2/3 versions of the same video stored, but you can serve to every existing device/browser that supports video (i.e.: the iPhone).
<video width="640" height="360" poster="__POSTER__.jpg" controls="controls">
<source src="__VIDEO__.ogv" type="video/ogg" />
<source src="__VIDEO__.mp4" type="video/mp4" /><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"><!--<![endif]-->
<param name="src" value="__VIDEO__.mp4" />
<param name="autoplay" value="false" />
<param name="showlogo" value="false" />
<object width="640" height="380" type="application/x-shockwave-flash"
data="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4">
<param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4" />
<img src="__POSTER__.jpg" width="640" height="360" />
<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>
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
If you need to look for a Flash based player (both audio and video), take a look at Flowplayer, an Open Source (GPL 3) video player for the Web. It can do almost anything you might want to do, and there is an extensive collection of plugins for many applications.
Side-step the problem by using a flash based mp4 video player, this approach is the de facto one currently.
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)