이제 이슈 목록을 살펴 봤는데 # 3078과 비슷합니까?

3066이 더 정확하다고 생각합니다.

기록을 위해 (https://github.com/bfred-it/iphone-inline-video) 비디오를 iOS 9에서 인라인으로 재생하는 데 사용하고 있습니다. 이것은 작동하지만 videoTexture가 그리는 것 같지 않습니다 ios9의 프레임. 해당 lib는 requestanimationframe 호출을 만들고 프레임별로 비디오를 단계별로 진행합니다.

흠, 흥미 롭군요. iOS 장치가 없기 때문에 이것은 나에게 힘든 일입니다. 다른 개발자 중 한 명이 곧이 문제를 해결할 수 있기를 바랍니다!

@ pr1ntr 이에 대한 이전 스레드에서 ios9 이하가 전체 화면으로 이동하지 않고는 비디오를 재생할 수없는 방법을 설명했습니다. 이것이 Apple이 디자인 한 방식의 일부입니다.

이제이 동작을 실제로 허용하기 위해 영리한 헛소리를하는 써드 파티 폴리 필 라이브러리가 있습니다. 내가 믿는 것은 PIXI의 범위를 벗어 났기 때문에 PIXI 자체에 포함되는 것을 볼 수 없었습니다.

하지만 .... 다양한 OS 버전의 iPhone으로 둘러싸여 있고,이 lib와 함께 플레이 할 것입니다. 결과가 있으면 다시 연락 드리겠습니다. :)

안녕하세요, 조사해 주셔서 감사합니다. 내가 찾은 동작은 비디오가 정상적으로 이벤트를 실행하는 경우 텍스처의 업데이트가 업데이트되지 않는다는 것입니다. 내가 사용하는 폴리 필은 모든 이벤트를 정상적으로 실행해야합니다. 동영상을 진행할 수있는 자체 부두 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'를 제공합니다. 이것은 비디오에 소리가 없다는 것입니다. 이것이이 타사 폴리 필을 사용하여 PIXI와 인라인 작업을 할 수있는 유일한 방법입니다. 바라건대 그것은 당신에게 허용되는 트레이드 오프입니다!

핵심은 오디오가 전혀없는 비디오 일 수 있습니다. 나는 거짓을 제공했지만 비디오에 오디오 트랙이 있습니다. 오디오가있는 테스트 비디오를 사용하고있었습니다. 우리가 만들고있는 앱의 실제 동영상에는 아무것도 없습니다. 다시 인코딩을 시도하고 다시보고하겠습니다.

여러 비디오를 사용한 테스트에서 비디오에 오디오가 있는지 여부는 중요하지 않습니다. 'makeVideoPlayableInline'에 'false'를 전달하면 동영상이 인라인으로 재생됩니다.

맞아 나는 거짓을 전달하고있다. 하지만 다른 곳에서 비디오를 포장하고 있습니다.

이것은 제 비디오 컴포넌트 _Warning_ React입니다.
https://gist.github.com/pr1ntr/8511ede7068eac180f515a18ddf75a89#file -connectvideo-js-L52
인라인 폴리 필을 실행하는 곳입니다 (라인 52).
60 행은 부모에게 PixiVideoWrapper 를 렌더링하도록 지시하는 ready 함수를 호출합니다.
여기입니다 :
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. 감사합니다.

이 스레드는 닫힌 후 최근 활동이 없었기 때문에 자동으로 잠겼습니다. 관련 버그에 대한 새 문제를여십시오.