iphone上的内嵌html5视频_Iphone_Html_User Interface_Video

iphone上的内嵌html5视频

iphone html user-interface video

iphone上的内嵌html5视频,iphone,html,user-interface,video,Iphone,Html,User Interface,Video,我想在iPhone上播放HTML5视频，但每当我尝试播放时，当调用video“.play（）”时，iPhone会自动全屏弹出。如何在iPhone不改变其UI的情况下在线播放视频，如下所示：（当您单击“启动360体验”时）编辑：这是我的代码： <!DOCTYPE html> <html lang="en"> <head> <title>iPhone Test</title> <meta

我想在iPhone上播放HTML5视频，但每当我尝试播放时，当调用video“.play（）”时，iPhone会自动全屏弹出。如何在iPhone不改变其UI的情况下在线播放视频，如下所示：

（当您单击“启动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测试
开始
您的浏览器不支持视频标记。

很抱歉将此作为回答而不是在主线程上发表评论，但我显然没有足够的信誉点发表评论

无论如何，我也希望做完全一样的事情作为OP

我注意到有一个特别的库，加上它允许在iPhone上在线播放视频！在这里可以找到一些正在运行的演示：

虽然我更喜欢一个简单的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示例所做的），但在此期间，这个演示可能会激发其他方面的一些想法

在苹果允许“webkit PlaysLine”在线播放之前，我一直在研究解决方案

我在这里建立了一个图书馆：

这很粗糙，但基本要点是你通过视频“寻找”，而不是直接播放。因此，与其打电话：

video.play()

而是使用“请求动画帧”或“设置间隔”设置循环，然后设置：

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>

苹果改变这一点的真正驱动因素将是最新版本的webGL for ios设备默认启用。基本上会有一大群人想使用视频纹理。从技术上讲，目前还无法做到这一点。

如果创建音频元素和视频元素，则可以通过用户交互播放音频，然后搜索视频，并将其渲染到画布上。这是我很快想到的（在iPhoneiOS9上测试）

在IOS10/Safari 10上，您现在可以将

playsinline

属性添加到HTML5视频元素中，它将直接内联播放。

请发布您正在进行的工作实现。Chris J，我还认为您的第一个示例是有效的，因为该特定库实际上通过JavaScript实时解码视频流（而不是利用浏览器/操作系统的内置解码器）。这类似于，iPhone上也能正常工作，尽管帧速率看起来很奇怪，而且音频同步似乎也不太好。这里的示例：这不会加载源文件两次吗？@yckart，不会。视频在第一次加载时被缓存。我想它也会加载两次。我检查了网络检查器以查看这一点它实际上只加载了一次视频，第二个请求是从缓存中提供的。这很有效！如果你更喜欢一个更全面的解决方案，请尝试（披露：我写的）。这基本上是相同的概念，但它也能处理事件并使其无缝。在iOS 8-9上，你可以用作多边形填充

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();
});

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();
}