iPhone上的内联html5视频答案

【问题标题】：inline html5 video on iphoneiPhone上的内联html5视频
【发布时间】：2015-08-31 13:38:04
【问题描述】：

我想在 iPhone 上播放 HTML5 视频，但每当我尝试播放视频“.play()”时，iPhone 会自动全屏弹出。如何在不改变 iPhone 的 UI 的情况下内联播放视频：

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

http://www.takeyourdose.com/en（点击“开始360体验”时）

编辑：这是我的代码：

<!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>

【问题讨论】：

请发布您正在进行的实施。

标签： iphone html user-interface video

【解决方案1】：

我正在努力解决这个问题，直到 Apple 允许“webkit-playsinline”实际内联播放。

我在这里开了一个库：https://github.com/newshorts/InlineVideo

这很粗略，但基本要点是您通过视频“寻找”而不是直接播放。所以不要打电话：

video.play()

您改为使用请求动画帧或 setInterval 设置循环，然后设置：

video.currentTime = __FRAME_RATE__

所以整个事情可能看起来像你的 html：

<video controls width="300">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>
<canvas></canvas>
<button>Play</button>

和你的 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

Apple 改变这一点的真正驱动力将是最近发布的默认启用的 ios 设备的 webGL。基本上会有一大群人希望使用视频纹理。从技术上来说，目前还做不到。

【讨论】：

【解决方案2】：

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

【讨论】：

在 iOS 8-9 上，您可以使用 iphone-inline-video 作为 polyfill

【解决方案3】：

如果您创建一个音频元素和一个视频元素，您可以通过用户交互播放音频，然后寻找视频，将其渲染到画布上。这是我很快想到的（在 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

【讨论】：

这样不会两次加载源文件吗？
@yckart，没有。视频在第一次加载时被缓存。我以为它也会加载两次。我检查了网络检查器，发现它实际上只加载了一次视频，第二个请求是从缓存中提供的。
这行得通！如果您更喜欢更全面的解决方案，请尝试iphone-inline-video（披露：我写的）。它基本上是相同的概念，但它也处理事件并使其无缝。

【解决方案4】：

很抱歉将其作为答案而不是在主线程上发表评论，但我显然没有足够的声誉点来发表评论！

无论如何，我也希望做与 OP 完全相同的事情。

我注意到有一个特殊的库krpano，加上krpano videoplayer plugin，允许在iPhone INLINE 上播放视频！可以在此处找到有关此操作的一些演示：http://krpano.com/video/

虽然我更喜欢简单的 2D 视频示例而不是这些疯狂的全景视频，但这是我在网上搜索时找到的最接近的示例。据我所知，他们使用了一个未附加到文档的普通元素：

var v = document.querySelector('video');

// remove from document
v.parentNode.removeChild(v); 

// touch anywhere to play
document.ontouchstart = function () {
  v.play();
}

移除前的视频元素：

<video playsinline webkit-playsinline preload="auto" crossorigin="anonymous" src="http://www.mediactiv.com/video/Milano.mp4" loop style="transform: translateZ(0px);"></video>

但这似乎还不够：当视频播放时，它仍然会全屏显示。

他们如何防止视频全屏显示？

编辑：在查看了两个示例之后，看起来它们都在利用 canvas 元素来渲染视频，所以我继续制作了一个演示，通过 canvas 元素展示了视频渲染。虽然演示效果很好，但它无法在 iPhone 上提供（即使视频元素已完全从 DOM 中删除！）——视频仍会跳转到全屏。我想下一步是将这些相同的原则应用于 WebGL 画布（这就是 krpano 示例正在做的事情），但与此同时，这个演示可能会激发其他人的一些想法......

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

【讨论】：

Chris J，我还认为您的第一个示例有效，因为该特定库实际上通过 JavaScript 实时解码视频流（而不是利用浏览器/操作系统的内置解码器）。这类似于Broadway.js，它也巧合地在 iPhone 上运行，尽管帧率看起来非常古怪，而且音频似乎也不是特别好同步。此处示例：mbebenita.github.io/Broadway/foxDemo.html