Maintenant que j'ai regardé la liste des problèmes, est-ce similaire à #3078 ?

3066 est plus précis je pense.

pour mémoire, j'utilise (https://github.com/bfred-it/iphone-inline-video) pour qu'une vidéo soit lue en ligne par elle-même sur ios 9. Cela fonctionne, mais la videoTexture ne semble pas dessiner les cadres sur ios9. cette lib crée un appel requestanimationframe et parcourt la vidéo image par image.

Hum ... intéressant. C'est difficile pour moi car je ne possède pas d'appareil iOS. J'espère que l'un des autres développeurs pourra bientôt éliminer cela !

@pr1ntr Dans le fil de discussion précédent, j'ai décrit comment ios9 et moins ne peuvent pas lire une vidéo sans qu'elle passe en plein écran. Cela fait partie de la façon dont Apple les a conçus.

Maintenant, il y a cette bibliothèque polyfill tierce qui fait des manigances intelligentes pour permettre ce comportement. Ce qu'il fait, je crois, dépasse la portée de PIXI, donc je ne pouvais pas le voir être inclus dans PIXI lui-même.

Mais.... Je me suis entouré d'iPhones de différentes versions d'os, et je vais jouer avec cette lib. Je reviendrai vers vous avec toutes les conclusions :)

Salut, merci pour l'enquête. Le comportement que je trouve est que la mise à jour de la texture ne se met pas à jour si la vidéo déclenche ses événements normalement. Ce polyfill que j'utilise devrait déclencher tous les événements normalement, il a juste sa propre coche vaudou requestAnimationFrame pour faire avancer la vidéo. Lorsque vous l'utilisez avec juste une balise <video> cela fonctionne très bien.

Je pense que le bug n'est pas qu'il passe en plein écran, mais qu'il n'entend pas les événements de la même manière. J'essayais d'enquêter sur la source mais je n'avais pas beaucoup de temps et/ou de cadre de référence.

Je peux essayer de faire un exemple sur codepen pour présenter ce comportement. serait-ce utile ?

Si vous attendez encore quelques minutes, j'aurais peut-être trouvé une solution pour vous :)

doux!

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

Donc, ce qui précède fonctionne pour moi ios8 et ios9. Notez que lorsque vous appelez « makeVideoPlayableInline », vous fournissez « false ». C'est-à-dire que la vidéo n'a pas de son. C'est la seule façon pour moi de travailler en ligne avec PIXI avec ce polyfill tiers. J'espère que c'est un compromis acceptable pour vous !

Je pense que la clé peut être que la vidéo n'a pas du tout d'audio. Je fournissais faux mais la vidéo a une piste audio. J'utilisais juste une vidéo de test qui avait de l'audio. La vidéo réelle de l'application que nous créons n'en aura pas. Laissez-moi essayer de ré-encoder et je vous ferai un rapport.

Dans mes tests avec plusieurs vidéos, peu importe si la vidéo contient de l'audio ou non. En passant 'false' à 'makeVideoPlayableInline', la vidéo sera lue en ligne.

à droite je passe faux. mais j'emballe la vidéo ailleurs.

Ceci est mon composant vidéo _Warning_ React.
https://gist.github.com/pr1ntr/8511ede7068eac180f515a18ddf75a89#file -connectvideo-js-L52
C'est là qu'il exécute le polyfill en ligne (ligne 52)
Ligne 60, il appelle une fonction ready qui dit à son parent de rendre le PixiVideoWrapper
C'est ici :
https://gist.github.com/pr1ntr/57032704841e471c3a145308072f3ee2#file -game-js-L37

Ensuite, une fois le PixiVideoWrapper monté, il fait tout pour que la texture de la vidéo fonctionne :
https://gist.github.com/pr1ntr/3a44f327406d5d5a97824c47d6194484#file -pixivideowrapper-js-L118

Ainsi, dans le Game.js, si l'utilisateur a appuyé, il doit indiquer à la vidéo de jouer dans PixiVideoWrapper ligne 81 via la ligne 121 componentWillReceiveProps .

Si je supprime le display:none je peux voir la lecture vidéo en ligne.

utilisez-vous également le dernier #dev ?

Oui

Tout ce qui précède le dernier développement a des problèmes de chargement des textures vidéo de base ou ne contient pas la balise en ligne pour les vidéos requise par ios10

ok donc ton exemple fonctionne pour moi. Mais où est la vidéo dans le DOM ? aussi quel est ce bouton appelé HOOK DIV ? Cela est étrange. Pourquoi cela ferait-il une différence si la vidéo existe déjà sur la page ?

Lors de la création de la basevideotexture, si la source est une vidéo directe, elle créera la balise vidéo html elle-même. C'est peut-être là que réside la différence. Jetez un œil au code source pour voir si des écouteurs d'événement sont configurés différemment ? Je n'aurai pas accès aux appareils ios avant jeudi pour jouer à nouveau avec ça, j'en ai peur

tu testes en simulateur ?

Non, je testais sur de vrais appareils.

salut
J'ai fait un test de base pour voir si fournir votre propre élément vidéo fonctionnerait. Ce n'était pas le cas sur ios9, l'exemple lorsque vous avez fourni la source sous forme de chaîne fonctionne.

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

Je n'ai pas trouvé la différence dans la source de PIXI. Je pense que je deviens fou.

La seule chose que je peux voir de différent, c'est que si vous laissez PIXI créer sa propre balise vidéo à partir d'une URL de chaîne, il appelle également
video.load();
Essaye ça juste après
video.appendChild(src);

omfg incroyable ! cela le résout totalement. fml. Merci.

Ce fil a été automatiquement verrouillé car il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau problème pour les bogues liés.