iphone上的内联html5视频

Question

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. 我想在iPhone上播放HTML5视频，但每当我尝试时，当视频'.play（）'被调用时，iPhone会自动全屏弹出。 How do I play the video inline without the iPhone changing the UI of it like these: 如何在不改变iPhone的UI的情况下内联播放视频：

http://www.easy-bits.com/iphone-inline-video-autostart http://www.easy-bits.com/iphone-inline-video-autostart

http://www.takeyourdose.com/en (When you click "Start the 360 experience") http://www.takeyourdose.com/en （点击“开始360体验”）

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>

Answer 1

I'm working on a solution to this until Apple allows the "webkit-playsinline" to actually play inline. 我正在努力解决这个问题，直到Apple允许“webkit-playsinline”真正实现内联播放。

I started a library here: https://github.com/newshorts/InlineVideo 我在这里开了一个库： 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: 您改为使用请求动画帧或setInterval设置循环，然后设置：

video.currentTime = __FRAME_RATE__

So the whole thing might look like in your html: 所以整个事情可能在你的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) 和你的js（确保包括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 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. Apple更改此功能的真正驱动因素是最近发布的默认启用ios设备的webGL。 Basically there are going to be a whole bunch of people looking to use video textures. 基本上会有很多人希望使用视频纹理。 technically right now, that can't be done. 从技术上讲，这是不可能完成的。

Answer 2

在IOS10 / Safari 10上，您现在可以将playsinline属性添加到HTML5 Video元素，它将只是内联播放。

Answer 3

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) 这是我提出的快速（在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 CodePen

Test Page 测试页面

Answer 4

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. 无论如何，我也希望做与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! 我注意到有一个特殊的库， krpano ，加上krpano videoplayer插件，允许在iPhone INLINE上播放视频！ Some demos of this in action can be found here: http://krpano.com/video/ 这里有一些演示可以在这里找到： 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. 虽然我更喜欢这些疯狂的全景视频的简单2D视频示例，但这是我在网上搜索时最接近的。 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. 虽然该演示效果很好，但它无法在iPhone上传送（即使视频元素已从DOM中完全删除！） - 视频仍会跳转到全屏。 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... 我认为下一步是将这些相同的原则应用于WebGL画布（这就是krpano示例正在做的事情），但与此同时，这个演示可能会引发其他人的想法......

http://jakesiemer.com/projects/video/index.htm http://jakesiemer.com/projects/video/index.htm

iphone上的内联html5视频

问题描述

4 个解决方案

解决方案1
8 2015-07-20 21:05:01

解决方案2
6 2016-09-12 14:18:32

解决方案3
3 2016-03-02 21:44:59

解决方案4
1 2015-06-15 23:54:51

iphone上的内联html5视频

问题描述

4 个解决方案

解决方案1 8 2015-07-20 21:05:01

解决方案2 6 2016-09-12 14:18:32

解决方案3 3 2016-03-02 21:44:59

解决方案4 1 2015-06-15 23:54:51

解决方案1
8 2015-07-20 21:05:01

解决方案2
6 2016-09-12 14:18:32

解决方案3
3 2016-03-02 21:44:59

解决方案4
1 2015-06-15 23:54:51