I'm embedding youtube videos within my iPhone phonegap app
e.g
<embed id="yt" src="http://www.youtube.com/v/myvidid" width="300" height="199"></embed>
This all works fine as the iPhone recognises these as a youtube videos and will insert the poster image and also invoke the youtube app upon click. However the problem is these youtube embeds are within a scrollable content area, for which I use CSS transformations to move up and down via touch scroll. When the user scrolls the area the video stays static in a fixed position on top of my content. No matter what CSS I add to the embeds, nothing seems to change this behavior.
Has anyone come across this behavior before or found a fix.
Many thanks.
Andrew
I have the same issue and had to use following workaround:
draw images with video thumbnails inside scroller
put play button over thumbnail
handle click event to show video outside of scroller
With code like this:
var videos = [];
$('#scroller object').each(function(i,el){
var movie = $(el).attr("data").replace(/^.*youtube\.com\/v\//,"");
var width = $(el).attr("width");
var height = $(el).attr("height");
var html = '<object style="margin-left:12px;margin-top:10px;" id="video" width="296" height="222" data="http://www.youtube.com/v/'+movie+'" type="application/x-shockwave-flash">' +
'<param name="allowfullscreen" value="true" />'+
'<param name="wmode" value="transparent" />'+
'<param name="src" value="http://www.youtube.com/v/'+movie+'" />'+
'</object>';
videos.push(html);
var thumb = "http://img.youtube.com/vi/"+movie+"/0.jpg";
$(el).replaceWith('<div id="video-'+i+'" style="width:240px;height:184px;background:url('+thumb+') no-repeat;background-size: 100%;"><div class="play-button"></div></div>');
$("#video-"+i).click(function(e,el){loadVideo(this)});
});
CSS code for pay button
.play-button {
position: absolute;
width: 240px;
height: 184px;
background: url(images/youtube_play.png) no-repeat;
background-size: 100%;
background-position: center center;
}
loadVideo function mockup:
function loadVideo(el){
var id = el.id;
if (!id) {
//play button clicked
id = $(el).parent()[0].id;
}
id = id.replace("video-","");
var html = videos[id];
//html contains <object> tag
$('#video-overlay').html(html).show();
}
Here is a nice tutorial Which Saved my Day
http://eisabainyo.net/weblog/2012/01/24/embed-a-youtube-video-iframe-in-phonegap-app/
Also i m posting some codes For a quick Access.
<html>
<head>
<title>YouTube video</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="phonegap-1.2.0.js"></script>
</head>
<body>
<iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Then make the following changes in Phonegap.plist
![MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
*.youtube.com
*.ytimg.com][2]
Video will play on your Simulator Also.
Related
So I've set image to display:none using a media query.
#media only screen and (max-width:530px) {
img {
display: none;
}
}
I have also tried putting the image/s in a parent div, then setting that display to none. That didn't work either.
<div id="right">
<img src="images/meeting.jpg" />
</div>
But if you view Chrome dev tools, you can see that it still requests it.
Image
How can I disable the image from being requested but only when in mobile view or specific width (using a media query)
When you run the snippet below and check with developer tools, you will see that 100 and 200 are downloaded. But 300 is not.
.hide {
display: none;
}
/* demo with placehold images */
/* this image is downloaded */
<img src="http://placehold.it/100">
/* this image is downloaded */
<img class="hide" src="http://placehold.it/200">
/* this image is NOT downloaded */
<div class="hide">
<img src="http://placehold.it/300">
</div>
You could also move all css to media query:
#media only screen and (min-width:530px) {
#right>img {
display:block;
content: url("https://i.stack.imgur.com/5Sdkx.png");
}
}
#media only screen and (max-width:530px) {
#right>img {
content: '';
}
}
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="right">
<img src="" />
</div>
</body>
</html>
EDIT
Please, see this link
I try to display a 360-video in a a-sphere using the a-frame framework.
My code is as follows:
<html>
<head>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script>
<title></title>
</head>
<body>
<a-scene>
<a-assets
<video id="antarctica" playsinline autoplay loop="true" src="130.mp4">
</a-assets>
<a-videosphere src="#antarctica"></a-videosphere>
<!-- Using the asset management system. -->
<a-camera position = "0 0 0">
<a-cursor color=#FFFFFF></a-cursor>
</a-camera>
</a-scene>
<script>
</script>
</body>
</html>
The video is not displaying in the iphone browser, and as you can see i tried using the playsinline attribute. Can someone point me to the right direction?(It is working on desktop on android)
EDIT: I bookmarked the page to my home screen
Unfortunately, video does not autoplay on mobile browsers yet.
For some projects, I've solved this by hiding the a-scene and displaying a video element on the page that the user has to press to start the scene. After the user has pressed the play button, the video element is moved into a-assets element, the a-scene is made visible, and start the video with javascript. At this point, the video will be displayed on the videosphere.
Here's an example...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video example</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="./bower_components/aframe/dist/aframe.js"></script>
<script>
window.addEventListener("load", function() {
document.querySelector("#video").addEventListener("play", function() {
var video = document.querySelector("video");
var assets = document.querySelector("a-assets");
var videosphere = document.querySelector("a-videosphere");
var scene = document.querySelector("a-scene");
assets.appendChild(video);
videosphere.setAttribute("src", "#video");
scene.removeAttribute("style");
video.play();
})
});
</script>
</head>
<body>
<video id="video" controls="true" autobuffer height="100%" width="100%" webkit-playsinline src="./media/video.mp4" type="video/mp4"></video>
<a-scene>
<a-assets></a-assets>
<a-videosphere></a-videosphere>
</a-scene>
</body>
</html>
Edit: Just noticed your comment about iPhone. Have you also added a bookmark to your home screen?
I'm working on a site that is supposed to launch next week. I'm struggling with an issue with the Brightcove smart player api on iPhone and iPad specifically if it's in a modal. I'm using a very simple custom skin setting the icons and colors in BEML. I'm using the player inline and in a modal. In both instances the player code is on the page by default. In the instance of the modal the container is hidden with CSS.
Here is my current code used for the modal:
<section class="fullscreen-container modal template-modal">
<div class="fullscreen-interior fullscreen-interior-video">
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script>
<object id="myExperience" class="BrightcoveExperience">
<param name="bgcolor" value="#000000" />
<param name="width" value="602" />
<param name="height" value="451" />
<param name="playerID" value="XXXXXXXXXXXX" />
<param name="playerKey" value="XXXXXXXXXXXX" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="includeAPI" value="true" />
<param name="templateLoadHandler" value="onTemplateLoad" />
<param name="templateReadyHandler" value="onTemplateReady" />
</object>
<script type="text/javascript">
if(!Modernizr.touch) {
brightcove.createExperiences();
} else {
$('.template-modal').addClass('template-modal-is-loading');
brightcove.createExperiences();
}
</script>
<script language="JavaScript" type="text/javascript">
var player, modVP, expMod;
function onTemplateLoad(experienceID) {
player = brightcove.api.getExperience(experienceID);
}
function onTemplateReady() {
modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
if(Modernizr.touch) {
setTimeout( function(){
$('.template-modal-is-loading').removeClass('template-modal-is-loading');
},500);
}
}
</script>
</div>
<button class="close-button">
<span aria-hidden="true" data-icon=""></span>
</button>
</section>
At first the player would not show up at all on the iPad. It would only show up on iPhone after rotating the device and changing orientation. After that the thumbnail would appear with the play button on top of it. Clicking the video thumbnail would play the video, it would take over the screen, and work play perfectly.
After inspecting the contents of the iframe that is being generated by the smart player on the iPad, it appeared that all the internal elements were set to 0x0. I then set a class on the container that will force it to be shown and then removed in the template ready handler.
function onTemplateReady() {
modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
$('.template-modal-is-loading').removeClass('template-modal-is-loading');
}
After adding this code the smart player in the modal was no longer working on desktop. ( It would no longer load at all. The player would not appear. )
I then added the conditionals to check if Modernizr.touch is true. If so add the class to show the container. Load the player and once template ready fires remove the class to hide it again.
Now the player works again on desktop seamlessly both in the modal and embedded inline on a page.
On the iPhone it still won't show unless I rotate the device and playing the video no longer works at all. When clicking the thumbnail and play button the thumbnail is removed and the player remains black.
On the iPad when the modal now opens it shows the thumbnail and play button which it did not before. Now when pressing the thumbnail and play button the thumbnail disappears and you can hear the video playing but the player is completely black and now video is showing at all.
This is the code that is called then a modal is opened:
waitForModVp = function () {
if( typeof modVP == 'object' ) {
modVP.loadVideoByReferenceID(newSrc);
$(window).on('resize.size-video', function(){
expMod = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
var width = window.innerWidth*0.8,
height = (window.innerWidth*0.8)*0.7491694352;
if (width < 610) {
expMod.setSize(width, height);
$('.fullscreen-interior-video').css({
'width' : width+'px',
'height' : height+'px'
});
}
})
//For analytics
//countViewUrl = ( evt.triggeredReference.closest('[data-countview-url]').attr('data-countview-url') );
//$.get(countViewUrl);
} else {
window.setTimeout( waitForModVp, 250 );
}
}
Does anyone know how to resolve this issue or have any idea of what could be causing this?
According to Brightcove Known-Issues documentation:
If an HTML5 player is initially hidden (as in a lightbox implementation) attempts to play videos will fail silently. If the publisher intends to hide and show their lightbox multiple times, we recommend hiding it outside the viewport or covering it with another element instead of using display:none to avoid this issue.
My ultimate goal is to have on iDevices viewing my website, an image link that on click, plays a video at full screen, and upon finish of video redirects to another webpage. I am open to any solution that achieves my goal, even if it means scrapping the code I've got.
Here is my best attempt as of yet:
This is My current testing site
I was following this stackoverflow post
I am happy with the results on my laptop [edit works on Chrome but not FF 16.0.1 sigh I don't know anymore), but I am currently unable to click the image to play the video on my iDevices (ipad1 & iphone4). I've spent hours attempt to achieve this by researching, trial & error to no prevail.
Here is the code I am working with:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<meta name="description" content="" />
<title>test</title>
<script type="text/javascript">
function videoEnd() {
var video = document.getElementById("video");
video.webkitExitFullScreen();
document.location = "http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/jk5%20all/build.html";
}
function playVideo() {
var video = document.getElementById("video");
video.addEventListener('ended', videoEnd, true);
video.webkitEnterFullScreen();
video.load();
video.play();
}
</script>
</head>
<body>
<video id="video" poster="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/image.png" onclick="playVideo();">
<source src="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/video.mp4" type="video/mp4" />
</video>
</body>
</html>
If a browser doesn't support the fullscreen API (http://caniuse.com/#feat=fullscreen) then that may throw an error in your playVideo function. Try this modification:
function videoEnd() {
var video = document.getElementById("video");
if(video.webkitExitFullScreen) video.webkitExitFullScreen();
document.location = "http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/jk5%20all/build.html";
}
function playVideo() {
var video = document.getElementById("video");
if(video.webkitEnterFullScreen) video.webkitEnterFullScreen();
video.load();
video.play();
}
<video id="video" poster="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/image.png" onclick="playVideo();" onended="videoEnd();">
<source src="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/video.mp4" type="video/mp4" />
I have a little trouble regarding the positioning of a flash movie in the facebook canvas.
The flash movie has a size of 760x600 px. So i have set the facebook app advanced setting of the canvas width to fixed(760 px) and height to fixed (800 px).
The problem is, that i get a horizontal scroll bar and only 750 px of the flash movie are shown, because the flash movie seems to be aligned at canvas.x = 10 px and not at x = 0 px.
Is there a way to set the position of the flash movie? Preferably in Flash-As3?
Thanks in advance!
Update
Thanks for the input Niraj! Unfortunately i have never done anything with CSS. Here is my "index.html", would you tell me how to integrate your example into the html code?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Include support librarys first -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<div id="fb-root"></div><!-- required div -->
<div id="flashContent">
<h1>You need at least Flash Player 10.2 to view this page.</h1>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
</div>
<script type="text/javascript">
//This example uses dynamic publishing with swfObject. Login is handled in the swf
//Note we are passing in attribute object with a 'name' property that is same value as the 'id'. This is REQUIRED for Chrome/Mozilla browsers
swfobject.embedSWF("example.swf", "flashContent", "760", "600", "10.1", null, null, null, {name:"flashContent"});
// redirect
function redirect(id,perms,uri)
{
var params =
window.location.toString().slice(window.location.toString().indexOf('?'));
top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+id+'&scope='+perms+'&redirect_uri='+uri+params;
}
</script>
</body>
</html>
Thanks alot!
You problem lies in your Flash Page. You should remove margins from the HTML page that embeds the flash and use the Javacript SDK to resize the page using setAutoGrow() function. The overflow: hidden will remove the scrollbars too.
Example CSS:
body {
margin: 0;
overflow: hidden;
}
Edit:
In the <head> tag of your page, add in:
<style type="text/css">
html, body {
margin: 0;
overflow: hidden;
}
</style>