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?
Related
I used this code to add video into joomla mod_custom. But it is not working. How can I fix it.
<div>
<object type="application/x-shockwave-flash" data="test.flv">
<param name="movie" value="http://lifeisatripsrilanka.com/video/Cultural_vulture.flv" />
</object>
</div>
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've built a function that uploads,converts and then embeds a video into tinymce.
Tinymce keeps wrapping my video embeds with some < object > html, using their moxieplayer.swf.
I want to use custom videoplayers for these videos, but cant do that when tinymce behaves as it does.
This is the code im injecting to tinymce :
<video width="320" height="240" poster="5872deprivedwrath.jpg" preload="false" src="5872deprivedwrath.mp4">
<source type="video/mp4" src="5872deprivedwrath.mp4"><source type="video/ogv" src="5872deprivedwrath.ogv">
<object width="320" height="240" type="application/x-shockwave-flash" data="/js/flashmediaelement.swf">
<param name="movie" value="/js/flashmediaelement.swf">
<param name="flashvars" value="controls=true&file=5872deprivedwrath.mp4">
<img src="5872deprivedwrath.jpg" width="320" height="240" title="No video playback capabilities">
</object>
</video>
But when tinymce receives it, it turns into a big blob of html ( i can post that if needed ), wrapping it all in some moxieplayer flash embed.
<video width="320" height="240" poster="8910deprivedwrath.jpg" controls="controls" preload="preload">
<source src="8910deprivedwrath.mp4" type="video/mp4" /><source src="8910deprivedwrath.ogv" type="video/ogv" />
<object width="320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="flashvars" value="url=8910deprivedwrath.mp4&poster=8910deprivedwrath.jpg" />
<param name="src" value="moxieplayer.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="true" />
<embed width="320" height="240" type="application/x-shockwave-flash" src="/tiny_mce/plugins/media/moxieplayer.swf" flashvars="url=8910deprivedwrath.mp4&poster=8910deprivedwrath.jpg" allowfullscreen="true" allowscriptaccess="true" />
</object>
</video>
So i'm trying to find out how to disable this function, or work around it.
Has anybody had any experience with this?
Any input is greatly appreciated, as im struggling with this one!
Set the following option in TinyMCE's config:
flash_video_player_url: false
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").