video شرح - هل يمكنني تجنب مشغّل الفيديو الأصلي بملء الشاشة مع HTML5 على iPhone أو android؟




برنامج hot (6)

لقد أنشأت تطبيق ويب يستخدم علامة HTML5 وشفرة جافا سكريبت التي تعرض محتوى آخر متزامنًا مع الفيديو الجاري تشغيله. تعمل بشكل رائع في متصفحات سطح المكتب: Firefox و Chrome و Safari. على iPhone أو DroidX ، ينبثق مشغل الفيديو الأصلي ويسيطر على الشاشة ، مما يؤدي إلى حجب المحتوى الديناميكي الآخر الذي أريد عرضه في الوقت نفسه مع الفيديو.

هل هناك أي طريقة للتغلب على هذه؟ إذا لزم الأمر ، سأعرف كيفية كتابة التطبيقات المحلية لكلتا المنصتين ، ولكن ذلك سيوفر لي الكثير من الجهد إذا تمكنت فقط من الالتزام بـ HTML5 / JavaScript.


Answers

في iOS 10+

مكنت Apple السمة playsinline في جميع المتصفحات على iOS 10 ، لذلك هذا يعمل بسلاسة:

<video src="file.mp4" playsinline>

في iOS 8 و iOS 9

إجابة مختصرة: استخدام iphone-inline-video ، يمكّن التشغيل المضمّن ويزامن الصوت.

إجابة طويلة: يمكنك .play() هذه المشكلة من خلال محاكاة التشغيل عن طريق .play() على الفيديو بدلاً من .play() "ing".


إليك رابط مطوّر برامج Apple يقول صراحةً -

على أجهزة iPhone و iPod touch ، وهي أجهزة شاشة صغيرة ، " لا يتم عرض الفيديو داخل صفحة الويب"

اعتبارات خاصة بجهاز Safari

الآن :

  • تعمل سمة webkit-playsinline لمقاطع الفيديو بتنسيق HTML5 على نظام التشغيل iOS ولكن عند حفظ صفحة الويب على شاشتك الرئيسية كصفحة ويب فقط - لا إذا تم فتح صفحة في Safari
  • بالنسبة للتطبيق الأصلي مع WebView (أو التطبيق المختلط مع HTML ، CSS ، JS) ، يتيح UIWebView تشغيل الفيديو المضمّن ، ولكن فقط إذا قمت بتعيين الخاصية UIWebView لفئة UIWebView إلى true

هناك خاصية تمكّن / تعطل تشغيل الوسائط الخطية في مستعرض ويب iOS (إذا كنت تكتب تطبيقًا allowsInlineMediaPlayback ، allowsInlineMediaPlayback خاصية allowsInlineMediaPlayback لـ UIWebView). افتراضيًا على iPhone ، تم ضبط هذا على NO ، ولكن على iPad تم تعيينه على YES .

لحسن حظك ، يمكنك أيضًا ضبط هذا السلوك في HTML كما يلي:

<video id="myVideo" width="280" height="140" webkit-playsinline>

... من المفترض أن يتم ترتيبها لك. لا أعرف ما إذا كان سيعمل على أجهزة Android الخاصة بك. إنها ملكية Webkit ، لذلك ربما. يستحق الذهاب ، على أي حال.


في iOS 10 beta 4. الرمز الصحيح في html 5 هو <video src="file.mp4" webkit-playsinline="true" playsinline="true"> webkit-playinline for iOS 10- ، و playinline لـ iOS 10 +.

انظر التفاصيل عبر https://webkit.org/blog/6784/new-video-policies-for-ios/



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

إليك طريقة "واحدًا" للفانيلة JS لإجراء ذلك ، من خلال العمل في Chrome ، يرجى اختبارها في المتصفحات الأخرى:

http://jsfiddle.net/mattdlockyer/5eCEu/2/

HTML:

<video id="video" width="320" height="240"></video>

JS:

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4');

video.appendChild(source);
video.play();

setTimeout(function() {  
    video.pause();

    source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4'); 

    video.load();
    video.play();
}, 3000);






iphone android html5 video fullscreen