I have a lot of pages (thousands) with user generated content containing Youtube video's embedded with flash objects. This content was generated by a rich text editor like CKeditor and TinyMCE. They look like this:
<object width="550" height="400" data="//www.youtube.com/v/hENGl-ebqp0?version=3" type="application/x-shockwave-flash"><param name="allowScriptAccess" value="never" /><param name="allowNetworking" value="internal" /><param name="movie" value="//www.youtube.com/v/hENGl-ebqp0?version=3" /><param name="allowFullScreen" value="false" /></object>
I can't replace this with the iframe/html5 version of youtube embeds because this is part of larger pieces of HTML saved in a database.
But pages using these flash youtube embeds crash in Safari on iPhone. The page tries to reload a few times and end in a crash message.
This is a sample page which crashes in Safari: http://www.badboysbrand.nl/c-3021388/video/
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 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.
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").
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'm trying to create a facebook application that is flash (actually flex 4.1) based.
I load the flash application using the following command:
<object width="100%" height="100%" align="middle" type="application/x-shockwave-flash" id="XpoDemo" name="XpoDemo" data="file.swf"><param name="quality" value="high"><param name="bgcolor" value="#ffffff"><param name="allowscriptaccess" value="sameDomain"><param name="allowfullscreen" value="true"><param name="flashvars" value=""></object>
The problem is that in the facebook page I cannot see the full height of my application, it's missing like 150px.
any ideas why ?
You have to use FB.Canvas.setSize or FB.Canvas.setAutoResize (if the height changes during use)