please any one can tell me video format that play on any browser , with play/pause/stop buttons? i have the following code for .swf but i cant get any button to control.
<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>
You may want to take a look at something like jPlayer.
The current trend is to use HTML5 video to embed a player which is widely supported and does not require flash. This is particularly useful for devices such as the iPad/iPhone.
For browsers that do not support HTML, the pattern is to failover to a flash based version.
jPlayer handles a lot of this for you.
It will work if flash is instaled.
You can use Flash components to quickly setup a video player with controls
The HTML5 video tag is supported in all major browsers.(in Internet Explorer: from version 9) You can give that a try.
Related
The volume control in HTML5 videos on my website is not appearing, see screenshot: The video plays when started, but without any sound. The videos also play fine (with sound) in VLC and Windows Media Player.
I have tested in Chrome (65.0.3325.162), Firefox (59.0.1), and Android (on a Samsung tablet). The volume of my system is fine with other applications, and YouTube videos.
Here is the (minimal) code (adding additional attributes like height and poster etc. makes no difference to the problem):
<!DOCTYPE html>
<html lang='en'>
<body>
<video controls src='vid1.mp4' width='500'>
</video>
<video controls width='500'>
<source src='vid2.mp4' type='video/mp4' />
</video>
</body>
</html>
Am I missing something obvious?
[1]: https://i.stack.imgur.com/qAl7D.png
EDIT:
When I tested with a sample video on http://techslides.com/demos/sample-videos/small.mp4 the controls appeared. It seems to have something to do with the encoded mp4 video itself.
I have now removed the video urls. I re-encoded the videos using VLC, and they are now working correctly.
Why are these HTML5 video problems cropping up now after 5+ years?
TLDR: Your code routes around video content farms and their ad-click revenue by short circuiting MP4 content and eyeballs per second, this is retaliation. It's par for the course.
Browser developers have busted your HTML5 <video> browser embed code, either on purpose or by accident around the codecs needed to decode them. They own the source code of the browser that interprets and decodes your HTML5 MP4 file for presentation in the browser content area. Chrome developers corner the market on MP4 Videos and had their arms twisted by the powers that be. So the browser sees that the codec required to decode your MP4 is likely from an unauthorized area, and thus here we are scratching our heads as to why chrome isn't showing a volume button.
My requirements has to be that HTML5 Video is fixed on server side, I can't require users to fiddle around with their chrome flags or installing a plugin that corrects the bug. It has to just work by default on the latest Chrome, Safari, Firefox then IE, preferably in that order.
Screenshot of the case of the missing HTML5 video volume button:
The video plays, but at zero volume. No volume button is ever presented either during initial load, nor during or after playback. The mp4 download and go-full screen buttons are presented and work correctly during playback.
And yes, the chrome flags for new media player are disabled:
What it looked like before, what I expect to see:
The stripped down code I'm using:
This code was evolved from the likes of: http://camendesign.com/code/video_for_everybody
<html><body>
<video width="640"
preload="none"
height="360"
poster="some_content.png"
controls="controls">
<source src="some_content.mp4"
<source src="__VIDEO__.webm" type="video/webm" />
<source src="__VIDEO__.ogv" type="video/ogg" /><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D348
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"
<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=_
<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
Ogg Theora
</p>
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
</body></html>
The above code is the code that used to work, but got broken.
Final solution that worked for me: Manual clean of the 3rd party taint from my MP4 videos.
There are many options to clean and re-encode an MP4 video, some free others non-free. One way is open the MP4 file with VLC or other video player or software that has and open/save/reencode/convert tools in it, and save it out to a different video encoding format.
I was able to cook up a handy dandy script in Java to iterate over every MP4 file crack open the MP4 file, clean out the hobo taint if it exists then save and redeploy the mp4 file, and now all is well. Then do this on a schedule.
Other solutions considered, but rejected:
Eliminate the bugged HTML5 video embed tag from your tool set. Display an image with an html5 <img .../> tag, overlay a play button so as to indicate this is a video, when the user clicks either open a new tab where the raw MP4 video plays in browser: the volume button is shown correctly, or worst case the user downloads the MP4 video to disk, and they can open it up from disk with their video player.
Use a different browser or an open source browser, that know how to do the right thing.
Try toggling on the 'new media controls' chrome://flags, maybe at some point in the future the Chrome Devs will push a fix and it won't freak out on the evidence that the mp4 smells of digital rights violations.
Yield the vanguard and eyeball click revenue to the big player content providers, just use an whatever tag to redirect users to the websites who are able to show video correctly.
The game is afoot make your time.
It seems that you are using a mute video. Because of that, the volume control is not showing.
Check this out:
<video src='https://www.w3schools.com/tags/mov_bbb.mp4' controls>
</video>
Thank you for your help.
On my site I am embedding youtube videos. Where the video is suppose to be it isn't showing up, in chrome. It works on a macs and it also works on PCs, but only on firefox. Where the video is suppose to be you can "click" on the video and it will start playing, but it is not visible. How do I get it to show up. I thought it might be hiding behind stuff, so I messed with some z-index stuff, but it isn't working. Is there something else I should be looking at?
This is how the code is:
<object type="application/x-shockwave-flash" id="myytplayer" data="https://www.youtube.com/v/FJqOb-TS-0o&enablejsapi=1&playerapiid=ytplayer&version=3&controls=0&showinfo=0&rel=0" width="500" height="348">
<param name="allowScriptAccess" value="always">
</object>
The video is being pulled from my data base, but is being hosted by YouTube.
Here is the code on firefox:
<object id="myytplayer" width="500" height="348" type="application/x-shockwave-flash" data="https://www.youtube.com/v/FJqOb-TS-0o&enablejsapi=1&playerapiid=ytplayer&version=3&controls=0&showinfo=0&rel=0">
<param name="allowScriptAccess" value="always">
</object>
I have tried updating my flash drives to see if that is a problem. I have deleted my cookies. I have even had other people try it out and it just doesn't show up in chrome. Any help would be awesome.
Both your snippet of codes works fine in my Chrome 34 Windows 8.1 machine. Not sure where your issue is coming from. Maybe a system/network/proxy settings specific to Chrome on machines where you are trying from (sometimes Youtube URL are banned from company network).
I would point to the Youtube documentation anyway. Maybe trying another form of embed can help:
Best practice: IFrame embeds are the recommended method for embedding a YouTube player because the IFrame will select the appropriate player based on the client's capabilities and available YouTube file formats.
If you use the object tag you should have an embed tag falback inside (see the doc).
I don't find solutions in other threads/discussions.
I'm facing a problem while playing wav files with mediaelement.js in IE9. The player appears completely black without any control button.
I tried the normal way unsuccessfully
<audio id="player2" src="myFile.wav" type="audio/wav" controls="controls"></audio>
I tried HTML5shiv unsuccessfully
<!--[if IE]>
<script src="html5shiv.js"></script>
<![endif]-->
I tried to force flash fallback unsuccessfully.
<audio id="player2"
controls="controls">
<source src="myFile.wav" type="audio/wav" />
<!-- Flash Fallback -->
<object width="640" height="360" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="audio" value="videos/build/flashmediaelement.swf" />
<param id="flashvars-param" name="flashvars" value="controls=falseg&file=myFile.wav" />
</object>
</audio>
Plus mode: 'shim' in the javascript.
This works fine in FF and Google Chrome.
It doesn't looks like IE9 will play .WMA or .WAV files using the audio tag in HTML5. I found this on Garret Wilson's blog.
IE9 HTML5 Doesn't Support WAV Files
HTML5 is turning out to be useful. Well, in theory. If it worked. See, HTML5 comes with all sorts of capabilities, like an element that plays sound. And this time around, the browsers are setting aside their instincts to be proprietary and, in the spirit of interoperability, they are implementing the same API! Microsoft even loves the element! So now can we write pages that work the same across browsers? Of course not! While they support the same API, the browsers decided they would only support certain audio codecs—meaning that there is no one audio format that will work on all browsers. As usual, Microsoft's actions here can only be considered malicious and in the spirit of preventing interoperability, not encouraging it.
Let's take MP3 as an example. IE9 supports it. Yay. What about Firefox 9? No. Mozilla claims this is because of patent risks. Well, OK, if you say so. So what does Firefox support instead? Ogg. That's an open audio standard supposedly unencumbered by patent restrictions.
So whether or not Microsoft buys Mozilla's story about MP3, in the spirit of interoperability, why doesn't IE go ahead and implement Ogg just so there will be some audio format that works on both browsers? You tell me. Maybe Microsoft would say, "MP3 is ubiquitous—why should we cater to Mozilla's issues?" That's a cop-out, but I'll let it slide. There are more devious problems afoot.
Let's skip lossy formats altogether and look at LPCM-encoded WAV files. Sure, they are bigger, but let's say I don't care and I simply want something to work across browsers. Who supports it? Firefox 4? Yes. Chrome 4? Yes. Safari 5? Yes. Opera 10.6? Yes. IE9? No!!!!
If IE9 supported WAV, then there would be at least one audio format that was supported across all the major modern browsers.
Guess who created the WAV format to begin with? Microsoft. Why don't they support it? Maybe you should start looking for the answer in the paragraph above this one.
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)