I am using videolightbox to play videos on my site. It works (on all platforms) on the homepage where the video pops up in an overlay. To do that I use:
<a href="videos/player.swf?url=videos/filename.mp4">
on page2 (see: http://daretogaincontrol.com/page2?title=Having%20Fun)
I use an iframe tag like so:
<iframe src="videos/player.swf?url=videos/filename.mp4">
And that doesn't work. I'm not sure it's the iframe, but I've been around several circles trying to figure out why the videos don't play on iPad and iPhone (see Videos don't play on iPad/iPhone).
Works on all other platforms. Thanks for help.
Looks to me that your code is using an '.swf' file to play the .mp4 video.
Apple products do not facilitate the use of flash (.swf) objects.
You can bypass this by using something like the following code;
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="340" height="280" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="SRC" value="video.mp4">
<param name="AUTOPLAY" value="false">
<param name="CONTROLLER" value="false">
<embed src="video.mp4" width="340" height="260" autoplay="false" controller="false" pluginspage="http://www.apple.com/quicktime/download/">+
</object>
Hope this helps mate.
Related
I have looked everywhere to an answer to this, and it is all very confusing.
I can not get my videos to play on either an ipad or iphone.
They play on other devices including androids/desktops. I have converted them many times using Miro video converter and handbrake, I have tried reducing the file size. I have tried removing the poster tags. I have come to the conclusion there must be something wrong with my html, which look like this:
<div id="blackbox_2" style="display: none">
<video title="BlackBox Sessions Part 2" class="video" preload="auto" controls>
<source src="videos/BlackBoxPt.2 copy.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="videos/BlackBoxPt.2.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="videos/BlackBoxPt.2.ogv" type='video/ogg; codecs="theora, vorbis"'>
<object width="640" height="360" type="application/x-shockwave-flash"
data="flowplayer-5">
<param name="movie" value="flowplayer-5" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://kimcolemanprojects.com/videos/BlackBoxPt.2.appleuniversal.mp4", "autoPlay":false, "autoBuffering":true}}' />
</object>
</video> </div>
This html I got from dive into html. On the iPad/iphone you can see the video play button in the middle, however when you click on it nothing happens.
The page with the videos is here http://kimcolemanprojects.com/video-lighting.html
I have several videos on this page that are display in a fancy box.
If anybody can help guide me in the right direction I would be very grateful, this problem I'am finding very irritating.
Thanks
Angela
I decided the easiest option to this problem was to stream all my videos through youtube and vimeo. That way they work on everything.
I have a website that embeds issuu documents. Now it seems as the expanding and browsing through the document works in Firefox but not in Safari. You can try it out here: http://uniteich.at/service/agent Nothing happens in Safari if I click on the document.
Here is the html-code snippet where I bind in the issuu-code:
<div class="issuu">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" style="width:320px;height:240px" id="add9c3c4-afc6-970e-36fb-28ae7e20a616" >
<param name="movie" value="http://static.issuu.com/webembed/viewers/style1/v2/IssuuReader.swf?mode=mini&embedBackground=%23ffffff&backgroundColor=%23222222&documentId=120229092309-6b8da62cea0f428f95a491abc5302843" />
<param name="allowfullscreen" value="true"/>
<param name="menu" value="false"/>
<param name="wmode" value="transparent"/><embed src="http://static.issuu.com/webembed/viewers/style1/v2/IssuuReader.swf" type="application/x-shockwave-flash" allowfullscreen="true" menu="false" wmode="transparent" style="width:320px;height:240px" flashvars="mode=mini&embedBackground=%23ffffff&backgroundColor=%23222222&shareMenuEnabled=false&documentId=<?php print($fields['field_issuu_id_value']->content);?>" /></object>
</div>
I would be very thankful for help,
thanks enne
This is Safari's responsibility for not rendering Flash content.
The embed code you're using is Issuu's old embed code that only includes the Flash embeds. If you use their new embed like this
<div data-configid="6943700/11183544" style="width:525px; height:376px;" class="issuuembed"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
the embed will also render in browsers that don't support Flash (e.g. on the iPad etc).
You can get the new embed code from your document's page http://issuu.com/uniteich.at/docs/agent_3_final_web_0#embed or from the Publisher Tools (open menu -> "Embed").
In phonegap if you embed a video you come up with a bad scrolling (if you scroll the page with a finger on the video thumbnail, the whole viewport scrolls, instead of the correct div). To avoid this I'm trying to use a thumbnail image with a play button in its center: when the play button is pushed a js code renders an hidden div with an object tag inside (that's the video). The coolest thing at this point would be to let the video load on top of the fake thumbnail and autoplay (so the control goes automatically to the native youtube app)!
Everything works in my code, except for the autoplay: I've tried both the autoplay and autostart params:
<object style="margin-left:0px;margin-top:10px;" id="video" width="296" height="222" data="http://www.youtube.com/v/R6Z7xceSLy4" type="application/x-shockwave-flash">
<param name="allowfullscreen" value="true" />
<param name="autoplay" value="true">
<param name="autoStart" value="0">
<param name="wmode" value="transparent" />
<param name="src" value="http://www.youtube.com/v/R6Z7xceSLy4" />
</object>
and the &autoplay=1 or ?autoplay=1 trailing in the video address (I read somewhere that the '&' for some reason should be replaced by '?')
<object style="margin-left:0px;margin-top:10px;" id="video" width="296" height="222" data="http://www.youtube.com/v/R6Z7xceSLy4?autoplay=1" type="application/x-shockwave-flash">
<param name="allowfullscreen" value="true" />
<param name="autoplay" value="true">
<param name="autoStart" value="0">
<param name="wmode" value="transparent" />
<param name="src" value="http://www.youtube.com/v/R6Z7xceSLy4?autoplay=1" />
</object>
Do you have any suggestion? Another thing I thought to resolve my problem was to launch automatically the video in the youtube native app on play button push. I've tryed using
window.location = 'http://www.youtube.com/v/R6Z7xceSLy4';
everything seems correct, except that when done it doesn't give the control back to my app but it remains stucked in youtube app.
Can anybody help please?
Is there a common way to implement videos on the web that will also work on iPhone/iPad?
My idea is to provide two versions (Flash and HTML5) and check with JavaScript if HTML5 is supported — if so, then play Flash; if not, play HTML5. Maybe there’s a better way?
Dive into HTML5 nails it here : http://diveintohtml5.ep.io/video.html
The final markup uses a
element for HTML5 video, a nested
element for Flash fallback,
and a small bit of script for the
benefit of Android devices:
<video id="movie" width="320" height="240" preload controls>
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="pr6.mp4" />
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://wearehugh.com/dih5/pr6.mp4", "autoPlay":false, "autoBuffering":true}}' />
<p>Download video as MP4, WebM, or Ogg.</p>
</object>
</video>
<script>
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>
You can use HTML5 video tag as a default option and put a fallback object tag inside it.
You can read about HTML5 video tag usage in Safari (including Mobile Safari) here: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html
You can present videos either from your app's resource bundle or streamed via the internet, using this class: MPMoviePlayerController
Apple docs:
http://developer.apple.com/library/ios/#documentation/mediaplayer/reference/MPMoviePlayerController_Class/MPMoviePlayerController/MPMoviePlayerController.html
I found this to be very helpful:
http://camendesign.com/code/video_for_everybody
It uses HTML5 but gracefully fails to flash.
I am making an application that reads an mp3 file , and I want the user to be able to share the mp3 player on his profile and be shown like the image below:
and not like the normal share button.
<embed id="mpl" height="16" name="mpl"
type="application/x-shockwave-flash" width="176"
src="http://hexol.org/partners/player/player.swf"
flashvars="author=Bindas Radio&description=Bindas Radio&captions=Bindas&duration=9999999999&file=http://74.63.104.27:8234/;stream.mp3&link=http://www.fnradio.net/sms.php&backcolor=000000&frontcolor=FFFFFF&lightcolor=CCCCCC&screencolor=000000&volume=40&autostart=true&repeat=always"
wmode="opaque" allowscriptaccess="always"
allowfullscreen="true" quality="high"></embed>