Is there a way to display MP4 videos in its original size. It looks like we have to provide Width and Height and if we don't it will default to some value other than it's original size.
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" WIDTH="160" HEIGHT="136" >
<PARAM NAME="src" VALUE="videofilename_mp4.mov" >
<PARAM NAME="autoplay" VALUE="true" >
<EMBED SRC="videofilename_mp4.mov" TYPE="image/x-macpaint"
PLUGINSPAGE="http://www.apple.com/quicktime/download" WIDTH="160" HEIGHT="136" AUTOPLAY="true"></EMBED>
</OBJECT>
If I recall correctly you will have to read it from the metadata. I currently use the free version of Flowplayer.
You can pass it an option "scale:fit" http://flowplayer.org/documentation/api/clip.html
This tells the flash Flowplayer to read the file metadata and scale the video to fit inside the player container with the proper aspect ratio.
I know you probably don't want a flash solution but this is an option.
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").
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?
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;
}