Ahora que miré la lista de problemas, ¿es similar a # 3078?

3066 es más preciso, creo.

para el registro que estoy usando (https://github.com/bfred-it/iphone-inline-video) para hacer que un video se reproduzca en línea por sí mismo en ios 9. Esto funciona, sin embargo, videoTexture no parece dibujar los marcos en ios9. que lib crea una llamada de cuadro de animación requerida y recorre el video cuadro por cuadro.

Mmmm interesante. Este es uno difícil para mí ya que no tengo un dispositivo iOS. ¡Ojalá alguno de los otros desarrolladores pueda eliminar esto pronto!

@ pr1ntr En el hilo anterior para esto, describí cómo ios9 y versiones inferiores no pueden reproducir un video sin que esté en pantalla completa. Eso es parte de cómo los diseñó Apple.

Ahora, existe esta librería polyfill de terceros que hace algunas travesuras inteligentes para permitir este comportamiento. Lo que creo que está más allá del alcance de PIXI, por lo que no pude ver que alguna vez se incluyera dentro de PIXI.

Pero ... me he rodeado de iPhones de varios sistemas operativos, y jugaré con esta lib. Me pondré en contacto con usted con cualquier hallazgo :)

Hola, gracias por investigar. El comportamiento que estoy encontrando es que la actualización de la textura no se actualiza si el video está disparando sus eventos normalmente. Ese polyfill que estoy usando debería disparar todos los eventos normalmente, solo tiene su propio tick vudú requestAnimationFrame para impulsar el video. Cuando se usa con solo una etiqueta <video> en realidad funciona bien.

Creo que el error no es que se muestre en pantalla completa, sino que no escucha los eventos de la misma manera. Estaba tratando de investigar la fuente pero no tenía tanto tiempo ni marco de referencia.

Puedo intentar hacer un ejemplo en codepen para exhibir este comportamiento. ¿Sería útil eso?

Si esperas unos minutos más, es posible que haya encontrado una solución para ti :)

¡dulce!

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

Entonces, lo anterior funciona para mí ios8 e ios9. Tenga en cuenta que cuando llama a 'makeVideoPlayableInline', proporciona 'false'. Es decir, el video no tiene sonido. Esta es la única forma en que podría trabajar en línea con PIXI con este polyfill de terceros. ¡Esperamos que sea una compensación aceptable para usted!

Creo que la clave puede ser que el video no tenga audio en absoluto. Estaba proporcionando falso pero el video tiene una pista de audio. Solo estaba usando un video de prueba que tenía audio. El video real de la aplicación que estamos haciendo no tendrá ninguno. Déjame intentar volver a codificar y te informaré.

En mis pruebas con varios videos, no importa si el video tiene audio o no. Al pasar "false" a "makeVideoPlayableInline", el video se reproducirá en línea.

bien estoy pasando falso. pero estoy terminando el video en otra parte.

Este es mi componente de video _Warning_ React.
https://gist.github.com/pr1ntr/8511ede7068eac180f515a18ddf75a89#file -connectvideo-js-L52
Aquí es donde se ejecuta el polyfill en línea (línea 52)
La línea 60 llama a una función lista que le dice a su padre que renderice el PixiVideoWrapper
Esto es todo aqui:
https://gist.github.com/pr1ntr/57032704841e471c3a145308072f3ee2#file -game-js-L37

Luego, una vez que se monta PixiVideoWrapper, hace todo lo posible para que la textura del video funcione:
https://gist.github.com/pr1ntr/3a44f327406d5d5a97824c47d6194484#file -pixivideowrapper-js-L118

Entonces, en Game.js, si el usuario ha tocado, debería decirle al video que se reproduzca en la línea 81 de PixiVideoWrapper a través de la línea 121 componentWillReceiveProps .

Si elimino el display:none puedo ver la reproducción de video en línea.

¿También estás usando el último #dev?

Yeps

Cualquier cosa antes del último desarrollador tiene problemas para cargar texturas de video base o no contiene la etiqueta en línea para videos que requiere ios10

ok, entonces tu ejemplo funciona para mí. Pero, ¿dónde está el video en el DOM? también, ¿qué se llama este botón HOOK DIV? Esto es extraño. ¿Por qué haría la diferencia si el video ya existe en la página?

Al crear la textura del video base, si la fuente es un video directo, creará la etiqueta de video html en sí. Quizás aquí es donde está la diferencia. Eche un vistazo al código fuente para ver si algún detector de eventos está configurado de manera diferente. No tendré acceso a dispositivos ios hasta el jueves para volver a jugar con esto, me temo

estás probando en el simulador?

No, estaba probando en dispositivos reales.

Hola
Hice una prueba básica para ver si proporcionar su propio elemento de video funcionaría. No lo hizo en ios9, el ejemplo en el que proporcionó la fuente como una cadena 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);
}

No pude encontrar la diferencia en la fuente de PIXI. Creo que me estoy volviendo loco.

Lo único que puedo ver diferente es que si dejas que PIXI cree su propia etiqueta de video a partir de una URL de cadena, también llama
video.load();
Prueba eso justo después
video.appendChild(src);

omfg increíble! eso lo arregla totalmente. fml. gracias.

Este hilo se ha bloqueado automáticamente ya que no ha habido ninguna actividad reciente después de su cierre. Abra un nuevo problema para errores relacionados.