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.
Related
When I place a link on top of the HTML5 Video Tag. This will work on Safari, desktop browser, but on iPad and iPhone I can't click on it what so ever. Does someone know a work around for this?
<div class="video-wrapper">
<video id="mainVideo" poster="resources/videos/poster.jpg" controls="controls">
<source src="resources/videos/video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<a id="example" href="javascript:alert('ok')">Hello World</a>
</div>
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 am trying to troubleshoot this code and am running into a dead-end, so I thought I would ask my first question here. I have three questions:
1) What is the best approach to embed an mp4 for an iPhone specific view, preferably without using Javascript?
2) Are there any preferred practices to debug code on an iPhone?
3) Can anyone tell me what is wrong with my specific code below? I should mention upfront that the variable $fileName does indeed contain the correct info, I've just omitted that portion of the code. Also, the poster image does flicker for a brief moment before I receive the greyed out, broken QuickTime image so that is an indication that this is partially working.
Code:
<object width="448" height="335" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="/libraries/images/$fileName.jpg" />
<param name="href" value="/libraries/media/$fileName.mp4" />
<param name="target" value="myself" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<param name="scale" value="aspect" />
<embed src="/libraries/images/$fileName.jpg" href="/libraries/media/$fileName.mp4" type="video/mp4" target="myself" width="448" height="335" scale="aspect" controller="false" autoplay="false"> </embed>
</object>
You don't embed it, you link to it. Usually, the link is a thumbnail from the video itself. iPhones don't support embedding of movie files directly in a site.
Clicking the link will open Quicktime on the user's iPhone, then return them to the web page when they're done.
Even if embed works, a linked image is going to be easier to remember:
<img src="/libraries/images/$filename.jpg" width="448" height="335" />
Starting with OS 3.0 you can use the <VIDEO> tag
Despite a common misconception, you can use a second object tag instead of the embed tag, while changing the parameters to elements and using type="video/quicktime". The result will be the same on practically all browsers (I have yet to see a problem, although I am told IE6 screws it up), and the page will validate. The result on iPhone will be a little different than on desktop browsers. Unless you explicitly set a poster frame, it will use a black one. It will also put it's own play button on top of the poster frame. (if anyone knows how to disable either of those, I would love to know how) By doing this, you can do the whole thing without any Javascript at all. If you want to see an example, here one is: http://www.cdjunior.com/CD_JR/view.php?name=jehovahs_witnesses. The relevent part of the source is lines 94-100. I don't know if you can use an embed tag and make it work. Now that I think of it, I think this may be how the Apple Javascript does it.
Here's an implementation of what AlBeebe mentioned (HTML 5 video tag).
This will take an mp4 and embed it inside an iPhone frame without JS. However, you will probably run into resizing problems, so set a min-width: 758px; for your body.
Adjust with the video coordinates if things are misaligned.
HTML
<div id='photo'>
<div id='phone'>
<img src='img/phone-border.png'/>
<video src='img/cloud.mp4' autoplay loop width="209" height="370" poster="img/first-frame.png"/>
</div>
</div>
CSS
#phone {
position: relative;
}
#phone img {
width: 300px;
height: auto;
}
#phone video {
position: absolute;
width: 209px;
height: 370px;
top: 50%;
left: 50%;
margin-left: -182px;
margin-top: -185px;
}