Pixi.js: videoTexture.source.play () inicia em tela cheia no IOS

Criado em 14 out. 2016  ·  25Comentários  ·  Fonte: pixijs/pixi.js

@englercj da
isso está no branch #dev.
Eu tenho um elemento de vídeo escondido na página sem reprodução automática ou qualquer coisa.

Eu crio a tela e assim por diante faço todas as coisas necessárias e funciona bem em navegadores de desktop / Android.

quando eu clico em videoTexture.source.play (), ele abre FS no ios 9. Acho que a única solução é passar o vídeo quadro a quadro com solicitação de quadro de animação. Eu só não tinha certeza se isso é implementado em pixijs. Obrigado.

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

Comentários muito úteis

omfg inacreditável! isso corrige totalmente. fml. obrigado.

Todos 25 comentários

Agora que olhei a lista de problemas, isso é semelhante ao # 3078?

3066 é mais preciso, eu acho.

para registro, estou usando (https://github.com/bfred-it/iphone-inline-video) para obter um vídeo para reproduzir em linha sozinho no ios 9. Isso funciona, no entanto, videoTexture não parece desenhar os quadros em ios9. que lib cria uma chamada requestanimationframe e percorre o vídeo quadro a quadro.

Hmm interessante. Isso é difícil para mim, pois não tenho um dispositivo iOS. Esperançosamente, um dos outros desenvolvedores pode acabar com isso em breve!

@ pr1ntr No tópico anterior, descrevi como o ios9 e inferior não podem reproduzir um vídeo sem que ele vá para tela inteira. Isso faz parte de como a Apple os projetou.

Agora, existe esta biblioteca polyfill de terceiros que faz algumas manobras inteligentes para realmente permitir esse comportamento. O que ele faz, eu acredito que está além do escopo do PIXI, então eu não poderia imaginar que ele jamais fosse incluído no próprio PIXI.

Mas .... me cerquei de iPhones de vários os versons, e vou brincar com essa lib. Entrarei em contato com você com quaisquer descobertas :)

Oi, obrigado por investigar. O comportamento que estou descobrindo é que a atualização na textura não está sendo atualizada se o vídeo estiver disparando seus eventos normalmente. Esse polyfill que estou usando deve disparar todos os eventos normalmente, ele só tem seu próprio vodu requestAnimationFrame tick para empurrar o vídeo. Ao usá-lo com apenas uma tag <video> ele realmente funciona bem.

Acho que o bug não é ir para tela inteira, mas sim não ouvir os eventos da mesma forma. Eu estava tentando investigar a fonte, mas não tinha muito tempo e / ou quadro de referência.

Posso tentar fazer um exemplo no codepen para exibir esse comportamento. isso seria útil?

Se você esperar mais alguns minutos, posso ter encontrado uma solução para você :)

doce!

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

Então, o acima funciona para mim iOS8 e iOS9. Observe que, ao chamar 'makeVideoPlayableInline', você fornece 'false'. Isso quer dizer que o vídeo não tem som. Esta é a única maneira de conseguir trabalhar em linha com o PIXI com este polyfill de terceiros. Esperançosamente, essa é uma troca aceitável para você!

Acho que a chave pode ser o vídeo não ter áudio. Estava fornecendo falso, mas o vídeo tem trilha de áudio. Eu estava usando um vídeo de teste que tinha áudio. O vídeo real para o aplicativo que estamos fazendo não terá nenhum. Deixe-me tentar a recodificação e farei um relatório.

Em meus testes com vários vídeos, não importa se o vídeo contém áudio ou não. Ao passar 'false' para 'makeVideoPlayableInline', o vídeo será reproduzido em linha.

certo estou passando falso. mas estou encerrando o vídeo em outro lugar.

Este é o meu componente de vídeo _Warning_ React.
https://gist.github.com/pr1ntr/8511ede7068eac180f515a18ddf75a89#file -connectvideo-js-L52
É aqui que ele executa o polyfill embutido (linha 52)
Linha 60 ele chama uma função pronta que diz a seu pai para renderizar o PixiVideoWrapper
É isso aqui:
https://gist.github.com/pr1ntr/57032704841e471c3a145308072f3ee2#file -game-js-L37

Então, uma vez que o PixiVideoWrapper é montado, ele faz tudo para manter a textura do vídeo em funcionamento:
https://gist.github.com/pr1ntr/3a44f327406d5d5a97824c47d6194484#file -pixivideowrapper-js-L118

Portanto, no Game.js, se o usuário tocou nele, ele deve dizer ao vídeo para reproduzir no PixiVideoWrapper linha 81 através da linha 121 componentWillReceiveProps .

Se eu remover o display:none poderei ver a reprodução do vídeo embutido.

também está usando o #dev mais recente?

Sim

Qualquer coisa anterior ao último dev tem problemas para carregar texturas de vídeo de base ou não contém a tag inline para vídeos que o ios10 requer

ok então seu exemplo funciona para mim. Mas onde está o vídeo no DOM? também o que é este botão chamado HOOK DIV? Isto é estranho. Por que faria diferença se o vídeo já existe na página?

Ao criar a textura do vídeo-base, se a fonte for um vídeo direto, ele criará a própria tag de vídeo html. Talvez seja aí que está a diferença. Dê uma olhada no código-fonte para ver se algum ouvinte de evento está configurado de maneira diferente. Não terei acesso a dispositivos iOS até quinta-feira para brincar com isso de novo, infelizmente

você está testando no simulador?

Não, eu estava testando em dispositivos reais.

Oi
Fiz um teste básico para ver se fornecer seu próprio elemento de vídeo funcionaria. Não funcionou no ios9, o exemplo de quando você forneceu a fonte como uma string funciona.

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

Não consegui encontrar a diferença na fonte do PIXI. Acho que estou ficando louco.

A única coisa que posso ver diferente é que se você permitir que o PIXI crie sua própria tag de vídeo a partir de um URL de string, ele também chama
video.load();
Tente isso logo depois
video.appendChild(src);

omfg inacreditável! isso corrige totalmente. fml. obrigado.

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que foi fechado. Abra um novo problema para bugs relacionados.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

MRVDH picture MRVDH  ·  3Comentários

madroneropaulo picture madroneropaulo  ·  3Comentários

sntiagomoreno picture sntiagomoreno  ·  3Comentários

gigamesh picture gigamesh  ·  3Comentários

Darker picture Darker  ·  3Comentários