I want to play an HTML5 video on the iPhone but whenever I try to, the iPhone automatically pops out in fullscreen when the video '.play()' is called. How do I play the video inline without the iPhone changing the UI of it like these:
http://www.easy-bits.com/iphone-inline-video-autostart
http://www.takeyourdose.com/en (When you click "Start the 360 experience")
Edit: Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iPhone Test</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="document.getElementById('vid').play()">Start</button>
<video id="vid">
<source src="/videos/tutorial.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
I'm working on a solution to this until Apple allows the "webkit-playsinline" to actually play inline.
I started a library here: https://github.com/newshorts/InlineVideo
It's very rough, but the basic gist is that you "seek" through the video instead of playing it outright. So instead of calling:
video.play()
You instead set a loop using request animation frame or setInterval, then set the:
video.currentTime = __FRAME_RATE__
So the whole thing might look like in your html:
<video controls width="300">
<source src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>
<canvas></canvas>
<button>Play</button>
and your js (make sure to include jquery)
var video = $('video')[0];
var canvas = $('canvas')[0];
var ctx = canvas.getContext('2d');
var lastTime = Date.now();
var animationFrame;
var framesPerSecond = 25;
function loop() {
var time = Date.now();
var elapsed = (time - lastTime) / 1000;
// render
if(elapsed >= ((1000/framesPerSecond)/1000)) {
video.currentTime = video.currentTime + elapsed;
$(canvas).width(video.videoWidth);
$(canvas).height(video.videoHeight);
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
lastTime = time;
}
// if we are at the end of the video stop
var currentTime = (Math.round(parseFloat(video.currentTime)*10000)/10000);
var duration = (Math.round(parseFloat(video.duration)*10000)/10000);
if(currentTime >= duration) {
console.log('currentTime: ' + currentTime + ' duration: ' + video.duration);
return;
}
animationFrame = requestAnimationFrame(loop);
}
$('button').on('click', function() {
video.load();
loop();
});
http://codepen.io/newshorts/pen/yNxNKR
The real driver for Apple changing this will be the recent release of webGL for ios devices enabled by default. Basically there are going to be a whole bunch of people looking to use video textures. technically right now, that can't be done.
On IOS10 / Safari 10 you can now add the playsinline property to the HTML5 Video element, and it will just play inline.
If you create an audio element and a video element, you can play the audio via user interaction and then seek the video, rendering it to a canvas. This is something quick that I came up with (tested on iPhone iOS 9)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var audio = document.createElement('audio');
var video = document.createElement('video');
function onFrame(){
ctx.drawImage(video,0,0,426,240);
video.currentTime = audio.currentTime;
requestAnimationFrame(onFrame);
}
function playVideo(){
var i = 0;
function ready(){
i++;
if(i == 2){
audio.play();
onFrame();
}
}
video.addEventListener('canplaythrough',ready);
audio.addEventListener('canplaythrough',ready);
audio.src = video.src = "http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4";
audio.load();
video.load();
}
CodePen
Test Page
Apologies for writing this as an answer instead of a comment on the main thread, but I apparently do not have enough reputation points to comment!
Anyways, I am also looking to do exactly the same thing as the OP.
I noticed that there is a particular library, krpano, coupled with the krpano videoplayer plugin that allows for video to be played on iPhone INLINE! Some demos of this in action can be found here: http://krpano.com/video/
While I would prefer a simple 2D video example over these crazy panorama videos, this is the closest I have found while scouring the web. From what I can tell, they use a normal element not attached to the document:
var v = document.querySelector('video');
// remove from document
v.parentNode.removeChild(v);
// touch anywhere to play
document.ontouchstart = function () {
v.play();
}
Video element before it's removed:
<video playsinline webkit-playsinline preload="auto" crossorigin="anonymous" src="http://www.mediactiv.com/video/Milano.mp4" loop style="transform: translateZ(0px);"></video>
But that alone doesn't seem to be enough: when the video is played, it still goes fullscreen.
How do they manage to prevent the video from going fullscreen?
EDIT: After looking at both examples it looked like they both were leveraging the canvas element to render the video, so I went ahead and whipped up a demo showing off video rendering thru the canvas element. While the demo works great, it fails to deliver on iPhone (even tho the video element is completely removed from the DOM!) -- the video still jumps to full screen. I'm thinking the next step would be to apply these same principles to a WebGL canvas (that's what the krpano examples are doing), but in the meantime maybe this demo will spark some ideas in others...
http://jakesiemer.com/projects/video/index.htm
Related
Is there any viewport meta tag available for iOS 10 ?
I am facing zoom issue on my iPhone. I am using <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> and also user-scalable=no is not working.
It seems this meta is not taken into account anymore with iOS 10 RC.
Users are able to zoom in/out freely even when this meta.
I'm looking for a clean solution for that.
See disable viewport zooming iOS 10 safari?
fyi, It still works for home screen app
I have a fairly heavy GIS web-app that crashes when iOS devices with 1 Gigabyte of RAM try to zoom. After much experimentation, this is what works for me. Hope it helps. If anyone has any suggestions to improve this, then by all means enlighten us all! :)
// CSS (This prevents zoom on input)
input {
font-size: 16px!important;
}
// JavaScript (I use jQuery). This prevents pinch zoom.
var numTouches = 0;
$('body').on('touchmove', function(event){
numTouches = event.originalEvent.touches.length;
if(numTouches > 1){
event.preventDefault();
}
});
// And this prevents double tap zoom
var mylatesttap = new Date().getTime();
$('body').on('touchstart', function(event){
var now = new Date().getTime();
var timesince = now - mylatesttap;
if((timesince < 500) && (timesince > 0)){
// double tap
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
//alert('You tapped me Twice !!!');
}else{
// too much time to be a doubletap
}
mylatesttap = new Date().getTime();
});
This code was built upon samples from this post:
Detect double tap on ipad or iphone screen using javascript
I'm trying to create a simple tuner built using Paper.js on top of a node.js stack.
The tuner works well in a desktop browser, but when in an iPhone or iPad, clicking on one of the six rectangles (or strings) causes an odd flickering of the screen:
http://morning-temple-9106.herokuapp.com/
I tried these css fixes that were related to general html flickering on the iphone, but no luck.
canvas {
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
}
here is the JS that loads the audio -- I load the files before playNote is called for faster playback. the flicker occurs even if I load within playNote.
var audioPlayerE = new Audio();
audioPlayerE.src="strings/E.mp3"
audioPlayerE.load();
var audioPlayerA = new Audio();
audioPlayerA.src="strings/A.mp3"
audioPlayerA.load();
var audioPlayerD = new Audio();
audioPlayerD.src="strings/D.mp3";
audioPlayerD.load();
var audioPlayerG = new Audio();
audioPlayerG.src="strings/G.mp3";
audioPlayerG.load();
var audioPlayerB = new Audio();
audioPlayerB.src="strings/B.mp3";
audioPlayerB.load();
var audioPlayerElittle = new Audio();
audioPlayerElittle.src="strings/Elittle.mp3";
audioPlayerElittle.load();
playNote = function(index,count) {
var noteStr;
if(index-count==0) {audioPlayerE.play()}
if(index-count==1) {audioPlayerA.play()}
if(index-count==2) {audioPlayerD.play()}
if(index-count==3) {audioPlayerG.play()}
if(index-count==4) {audioPlayerB.play()}
if(index-count==5) {audioPlayerElittle.play()}
}
Here is my github repo:
https://github.com/dannycochran/cs184
from:
iPad Safari: How to disable the quick blinking effect when a link has been hit
didn't realize it was just a blinking effect, adding this to the css fixed it:
-webkit-tap-highlight-color: rgba(0,0,0,0);
I use the following HTML template with an to hand to a UIWebView. I understand that this is the supported way to play youtube videos.
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {'autoplay' : 1},
height: 'VIDEO_HEIGHT',
width: 'VIDEO_WIDTH',
videoId: 'VIDEO_ID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
if (event.data == YT.PlayerState.ENDED) {
event.target.clearVideo();
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
Obviously, I substitute in the dynamic values for the HEIGHT, WIDTH and VIDEOID params. This has always worked fine under iOS 5 on iPhone and iPad. Now under iOS 6, when the user taps the triangle the video appears to download and try to start, then gives up. Here is what appears in the logfile:
> 2012-09-30 23:27:48.759 xxxxx[6219:c07] [MPAVController] Autoplay: Enabling autoplay
> 2012-09-30 23:27:48.759 xxxxx[6219:c07] [MPAVController] Autoplay: Skipping autoplay, disabled (for current item: 0, on player: 1)
> 2012-09-30 23:27:48.761 xxxxx[6219:c07] setting movie path: http://o-o---preferred---sn-ab5e6nll---v24---lscache1.c.youtube.com/videoplayback?upn=ag6FiVPe_XY&sparams=cp%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=907064%2C908457%2C908310%2C914072%2C922401%2C920704%2C912806%2C913419%2C913546%2C913556%2C919349%2C919351%2C925109%2C919003%2C912706&key=yt1&expire=1349086864&itag=18&ipbits=8&sver=3&ratebypass=yes&mt=1349062032&ip=96.232.106.90&mv=m&source=youtube&ms=au&cp=U0hTTlBTVF9LTkNOM19ITVhJOnRob1gwVHFmQWUw&id=04d71fcbfe79a176&signature=33A43FD457B9FC5DD70284826E7D9BF113F9C0BB.9BC87BDCF97DFCB64F967D2CAD1051D2FC80DAC0
Same results in Simulator (all supported models) and hardware device (iPhone 4s).
Oddly, it still works just fine on iPad 2 (simulator and hardware), here is the logging:
> 2012-09-30 23:32:01.586 xxxxx[6390:c07] [MPAVController] Autoplay: Enabling autoplay
> 2012-09-30 23:32:01.586 xxxxx[6390:c07] [MPAVController] Autoplay: Skipping autoplay, disabled (for current item: 0, on player: 1)
> 2012-09-30 23:32:01.588 xxxxx[6390:c07] setting movie path: http://o-o---preferred---sn-ab5e6nll---v24---lscache1.c.youtube.com/videoplayback?upn=x7-Ydawtba4&sparams=cp%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=920921%2C926600%2C915704%2C914071%2C922401%2C920704%2C912806%2C913419%2C913546%2C913556%2C919349%2C919351%2C925109%2C919003%2C912706&key=yt1&expire=1349086864&itag=18&ipbits=8&sver=3&ratebypass=yes&mt=1349062271&ip=96.232.106.90&mv=m&source=youtube&ms=au&cp=U0hTTlBTVF9LTkNOM19ITVhJOmVQbjRzVUhBbFpF&id=04d71fcbfe79a176&signature=CD05405B78D1CD7987FE5B9F41DD2C15943BBC2E.863966BDB04003866C6740046C0C2499A0CC4DDD
I've seen some similar questions here recently, but so far no one has suggested what might be be happening. Can anybody suggest what might be going on?
Regards,
-MpK-
Your html worked fine for me (with HEIGHT, WIDTH and VIDEOID substitutions) as-is, loaded in a UIWebView on iOS 6, in both Simulator and device (iPhone 5).
Could the problem have been an intermittent YouTube or network problem? Have you tried again since or tried a different video ID?
Cheers,
Chris
I got the same issue. For me that was happening because i loaded video in viewWillAppear. viewWillAppear is called again after the you-tube video loaded. I fixed it by changing my code (viewWillAppear is called only in ios 6 after video loading)
I have a few mp3 soundclips to play at certain events on my HTML5 app. There's no tag, the script creates Audio objects at the beginning (one for each mp3) and loads the files. When I have to play a sound, I simply call play() on one of these objects.
This works fine in a Chrome desktop, but is very inconsistent in my iPod touch, eventually some sounds stop playing and I even get error alerts.
Here's a small script I set up to see the problem, it's hosted at soundtest.staticloud.com including the 3 audio files so you can check it out on an iPhone/whatever.
var snd = [];
window.onload = function() {
for(var i = 0; i < 3; i++) {
snd[i] = new Audio("snd" + i + ".mp3");
snd[i].load();
}
}
function sound(n) {
snd[n-1].play();
}
Am I doing something wrong?
I had a ton of audio problems in iDevices...what you have to do is blank out the last played clip before starting the next. Also, I just had a single audio object, and would change the source, so my solution looked more like this:
<html>
<body>
<audio></audio>
etc
</body>
<script type="text/javascript">
var sounds=[];
window.onload = function() {
for(var i = 0; i < 3; i++) {
sounds[i] = "snd" + i + ".mp3";
}
}
function sound(n){
snd=document.getElementsByTagName("audio")[0];
snd.pause(); //-----------------PAUSE THE LAST (WHICH MAY BE LONG DONE)
snd.src=''; //-----------------BLANK SRC
snd.src=sounds[n-1]; //---------REPLACE WITH NEW SOUND
snd.load();
snd.play();
}
</script>
</html>
So I've been using:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
to get my HTML content to display nicely on the iPhone. It works great until the user
rotates the device into landscape mode, where the display remains constrained to 320px.
Is there a simple way to specify a viewport that changes in response to the user changing the
device orientation? Or must I resort to Javascript to handle that?
Was just trying to work this out myself, and the solution I came up with was:
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
This seems to lock the device into 1.0 scale regardless of it's orientation. As a side effect, it does however completely disable user scaling (pinch zooming, etc).
For anybody still interested:
http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications
From the page:
<meta name="viewport" content="user-scalable=no,width=device-width" />
This instructs Safari to prevent
the user from zooming into the page
with the "pinch" gesture and fixes the
width of the view port to the width of
the screen, which ever orientation the
iPhone is in.
You don't want to lose the user scaling option if you can help it. I like this JS solution from here.
<script type="text/javascript">
(function(doc) {
var addEvent = 'addEventListener',
type = 'gesturestart',
qsa = 'querySelectorAll',
scales = [1, 1],
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
function fix() {
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>
You're setting it to not be able to scale (maximum-scale = initial-scale), so it can't scale up when you rotate to landscape mode. Set maximum-scale=1.6 and it will scale properly to fit landscape mode.
I have come up with a slighly different approach that should work on cross platforms
http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/
So far I have tested in on
Samsun galaxy 2
Samsung galaxy s
Samsung galaxy s2
Samsung galaxy Note (but had to change the css to 800px [see below]*)
Motorola
iPhone 4
#media screen and (max-width:800px) {
This is a massive lip forward with mobile development ...
I had this issue myself, and I wanted to both be able to set the width, and have it update on rotate and allow the user to scale and zoom the page (the current answer provides the first but prevents the later as a side-effect).. so I came up with a fix that keeps the view width correct for the orientation, but still allows for zooming, though it is not super straight forward.
First, add the following Javascript to the webpage you are displaying:
<script type='text/javascript'>
function setViewPortWidth(width) {
var metatags = document.getElementsByTagName('meta');
for(cnt = 0; cnt < metatags.length; cnt++) {
var element = metatags[cnt];
if(element.getAttribute('name') == 'viewport') {
element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
document.body.style['max-width'] = width+'px';
}
}
}
</script>
Then in your - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation method, add:
float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;
stringJS = [NSString stringWithFormat:#"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];
if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)
// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:#"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];
Additional Tweaking can be done by modifying more of the viewportal content settings:
http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm
Also, I understand you can put a JS listener for onresize or something like to trigger the rescaling, but this worked for me as I'm doing it from Cocoa Touch UI frameworks.
Hope this helps someone :)
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
suport all iphones, all ipads, all androids.
just want to share, i've played around with the viewport settings for my responsive design, if i set the Max scale to 0.8, the initial scale to 1 and scalable to no then i get the smallest view in portrait mode and the iPad view for landscape :D... this is properly an ugly hack but it seems to work, i don't know why so i won't be using it, but interesting results
<meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" />
enjoy :)
Why not just reload the page when the user rotates the screen with javascript
function doOnOrientationChange()
{
location.reload();
}
window.addEventListener('orientationchange', doOnOrientationChange);