Pixi.js: videoTexture.source.play () يبدأ تشغيل ملء الشاشة على IOS

تم إنشاؤها على ١٤ أكتوبر ٢٠١٦  ·  25تعليقات  ·  مصدر: pixijs/pixi.js

englercj من
هذا في فرع #dev.
لدي عنصر فيديو مخفي في الصفحة لا يوجد تشغيل تلقائي أو أي شيء.

أقوم بإنشاء اللوحة القماشية وهكذا أفعل كل الأشياء الضرورية وتعمل بشكل جيد في متصفحات سطح المكتب / Android.

عندما أضغط على videoTexture.source.play () ، فإنه يفتح FS على نظام التشغيل iOS 9. أعتقد أن الحل الوحيد هو خطوة إطار الفيديو بإطار مع طلب إطار الرسوم المتحركة. لم أكن متأكدًا مما إذا كان هذا قد تم تنفيذه في 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. يقوم هذا lib بإنشاء مكالمة requestanimationframe والخطوات عبر الفيديو إطارًا بإطار.

حسنًا ، ممتع. هذا صعب بالنسبة لي لأنني لا أملك جهاز iOS. نأمل أن يتمكن أحد المطورين الآخرين من التخلص من هذا قريبًا!

@ pr1ntr في الموضوع السابق لهذا ، وصفت كيف أن ios9 وتحت لا يمكن تشغيل مقطع فيديو بدون ملء الشاشة. هذا جزء من كيفية تصميم Apple لهم.

الآن ، يوجد هذا الطرف الثالث polyfill lib الذي يقوم ببعض الخدع الذكية للسماح بالفعل بهذا السلوك. ما أعتقده خارج نطاق PIXI ، لذلك لم أتمكن من رؤيته مطلقًا ضمن PIXI نفسها.

لكن .... لقد أحاطت نفسي بأجهزة iPhone من مختلف أنظمة التشغيل versons ، وسأقوم بالتلاعب بهذا lib. سأعود إليك بأي نتائج :)

مرحبا ، شكرا على التحقيق. يتمثل اكتشاف السلوك في أن التحديث على النسيج لا يتم تحديثه إذا كان الفيديو يطلق أحداثه كالمعتاد. يجب أن يطلق هذا polyfill الذي أستخدمه جميع الأحداث بشكل طبيعي ، فهو يحتوي فقط على علامة الفودو 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 مع polyfill التابع لجهة خارجية. نأمل أن تكون هذه مقايضة مقبولة بالنسبة لك!

أعتقد أن المفتاح قد يكون الفيديو الذي لا يحتوي على صوت على الإطلاق. كنت أقوم بإدخال خطأ ولكن الفيديو يحتوي على مسار صوتي. كنت أستخدم فقط فيديو تجريبي به صوت. لن يكون الفيديو الفعلي للتطبيق الذي نصنعه أيًا. اسمحوا لي أن أحاول إعادة الترميز وسأبلغ مرة أخرى.

في الاختبارات التي أجريتها مع مقاطع فيديو متعددة ، لا يهم ما إذا كان الفيديو يحتوي على صوت أم لا. بتمرير "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# الملف -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 التقييمات

القضايا ذات الصلة

sntiagomoreno picture sntiagomoreno  ·  3تعليقات

lunabunn picture lunabunn  ·  3تعليقات

neciszhang picture neciszhang  ·  3تعليقات

madroneropaulo picture madroneropaulo  ·  3تعليقات

softshape picture softshape  ·  3تعليقات