Pixi.js: videoTexture.source.play() 在 IOS 上启动全屏

创建于 2016-10-14  ·  25评论  ·  资料来源: pixijs/pixi.js

@englercj来自昨天的会议 #2873
这是在#dev 分支上。
我在页面上隐藏了一个视频元素,没有自动播放或任何东西。

我创建画布等做所有必要的事情,它在桌面/Android 浏览器中运行良好。

当我点击 videoTexture.source.play() 时,它会在 ios 9 上打开 FS。我认为唯一的解决方案是使用请求动画帧逐帧步进视频。 我只是不确定这是否在 pixijs 中实现。 谢谢。

👍 Not A Bug 💾 v4.x (Legacy) 📢 Accepting PRs 🕷 Bug

最有用的评论

omfg 难以置信! 这完全解决了它。 fml。 谢谢你。

所有25条评论

现在我查看了问题列表,这与#3078 类似吗?

我认为3066更准确。

为了记录我正在使用(https://github.com/bfred-it/iphone-inline-video)让视频在 ios 9 上自行播放。这有效,但是 videoTexture 似乎没有绘制ios9 上的帧。 该库创建一个 requestanimationframe 调用并逐帧浏览视频。

嗯,有意思。 这对我来说很难,因为我没有 iOS 设备。 希望其他开发人员之一可以尽快解决这个问题!

@pr1ntr在上一个线程中,我描述了 ios9 及以下版本如何在没有全屏显示的情况下播放视频。 这是苹果设计它们的一部分。

现在,有这个第三方 polyfill lib 做了一些聪明的恶作剧来实际允许这种行为。 我认为它所做的超出了 PIXI 的范围,所以我看不到它被包含在 PIXI 本身中。

但是......我已经用各种操作系统版本的iPhone包围了自己,并且会玩这个lib。 我会告诉你任何发现:)

您好,感谢您的调查。 我发现的行为是,如果视频正常触发其事件,则纹理的更新不会更新。 我使用的那个 polyfill 应该会正常触发所有事件,它只有自己的 voodoo requestAnimationFrame标记来推动视频。 当仅使用<video>标签时,它实际上工作正常。

我认为这个错误不是全屏显示,而是它没有以相同的方式听到事件。 我试图调查来源,但没有那么多时间和/或参考框架。

我可以尝试在 codepen 上做一个例子来展示这种行为。 那会有帮助吗?

如果您再坚持几分钟,我可能已经为您找到了解决方案:)

甜的!

var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, { transparent: true });
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

// create a video texture from a path
var texture = PIXI.Texture.fromVideo('video.mp4');
texture.baseTexture.autoPlay = false;
makeVideoPlayableInline(texture.baseTexture.source, false);

window.document.addEventListener( 'mousedown', function() {
    texture.baseTexture.source.play();
});

window.document.addEventListener( 'touchstart', function() {
    texture.baseTexture.source.play();
});

var videoSprite = new PIXI.Sprite(texture);
videoSprite.width = renderer.width;
videoSprite.height = renderer.height;
stage.addChild(videoSprite);

animate();

function animate(){
    requestAnimationFrame(animate);

    // render the stage
    renderer.render(stage);
}

所以,以上对我 ios8 和 ios9 都有效。 请注意,当您调用 'makeVideoPlayableInline' 时,您提供的是 'false'。 这就是说视频没有声音。 这是我可以通过第三方 polyfill 与 PIXI 进行内联工作的唯一方法。 希望这对您来说是一个可以接受的权衡!

我认为关键可能是视频中根本没有音频。 我提供的是假的,但视频有音轨。 我只是使用带有音频的测试视频。 我们正在制作的应用程序的实际视频不会有任何视频。 让我尝试重新编码,我会回来报告。

在我对多个视频的测试中,视频中是否包含音频并不重要。 通过将“false”传递给“makeVideoPlayableInline”,视频将内嵌播放。

对,我传假了。 但我将视频包装在别处。

这是我的视频组件 _Warning_ React。
https://gist.github.com/pr1ntr/8511ede7068eac180f515a18ddf75a89#file -connectvideo-js-L52
这是它运行内联 polyfill 的地方(第 52 行)
第 60 行它调用了一个就绪函数,该函数告诉它的父级渲染PixiVideoWrapper
这是这里:
https://gist.github.com/pr1ntr/57032704841e471c3a145308072f3ee2#file -game-js-L37

然后一旦 PixiVideoWrapper 安装,它就会做所有的事情来获得视频纹理:
https://gist.github.com/pr1ntr/3a44f327406d5d5a97824c47d6194484#file -pixivideowrapper-js-L118

所以在 Game.js 中,如果用户点击它应该告诉视频在 PixiVideoWrapper 第 81 行通过第 121 行componentWillReceiveProps播放。

如果我删除display:none我可以看到内嵌视频播放。

你也在使用最新的#dev吗?

是的

最新开发之前的任何内容要么在加载基本视频纹理时出现问题,要么不包含 ios10 需要的视频的内联标签

好的,所以你的例子对我有用。 但是 DOM 中的视频在哪里? 还有这个叫做HOOK DIV的按钮是什么? 这很奇怪。 如果视频已经存在于页面上,为什么会有所不同?

创建 basevideotexture 时,如果源是直接视频,它将创建 html 视频标签本身。 或许这就是不同之处。 查看源代码,看看是否有任何事件侦听器设置不同? 恐怕要到星期四才能访问 ios 设备再玩这个了

你在模拟器中测试吗?

不,我是在真实设备上测试的。

你好
我做了一个基本的测试,看看提供你自己的视频元素是否可行。 它在 ios9 上没有,当您将源作为字符串提供时的示例确实有效。

import inlineVideo from 'iphone-inline-video';

var video = document.createElement('video');
video.setAttribute('playsinline','');
video.setAttribute('webkit-playsinline','');

var src = document.createElement('source');
src.setAttribute('src', vidUrl);
src.setAttribute('type', 'video/mp4');

video.appendChild(src);

console.log(video);

// create the root of the scene graph
var stage = new PIXI.Container();

// create a video texture from a path
var texture = PIXI.Texture.fromVideo(video);
texture.baseTexture.autoPlay = false;
inlineVideo(texture.baseTexture.source, false);

window.document.addEventListener( 'mousedown', function() {
    texture.baseTexture.source.play();
});

window.document.addEventListener( 'touchstart', function() {
    texture.baseTexture.source.play();
});

var videoSprite = new PIXI.Sprite(texture);
videoSprite.width = renderer.width;
videoSprite.height = renderer.height;
stage.addChild(videoSprite);

animate();

function animate(){
    requestAnimationFrame(animate);

    // render the stage
    renderer.render(stage);
}

我在 PIXI 的来源中找不到差异。 我想我快疯了。

我能看到的唯一不同的是,如果你让 PIXI 从字符串 url 创建它自己的视频标签,它也会调用
video.load();
之后试试
video.appendChild(src);

omfg 难以置信! 这完全解决了它。 fml。 谢谢你。

由于关闭后没有任何近期活动,因此该线程已自动锁定。 请为相关错误打开一个新问题。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

st3v0 picture st3v0  ·  3评论

Makio64 picture Makio64  ·  3评论

SebastienFPRousseau picture SebastienFPRousseau  ·  3评论

Darker picture Darker  ·  3评论

readygosports picture readygosports  ·  3评论