مناقشة مختصرة حول التغلب على عيوب فيديو html5 على الأجهزة المحمولة

تقدم هذه المقالة محطة الفيديو المتنقلة html5 التي تملأ المزالق وتشاركها مع الجميع، والتفاصيل هي كما يلي:

 <معرف الفيديو=نمط الفيديو=كائن-مناسب:ملء التشغيل التلقائي webkit-playsinlinePlaysinline x5-video-player-type=h5 x5-video-player-fullscreen=true x5-video-orientation=portraint src=video.mp4 />< /video><!-- object-fit: fill يملأ محتوى الفيديو حاوية الفيديو بأكملها الملصق:img.jpg التشغيل التلقائي لغلاف الفيديو: التشغيل التلقائي تلقائيًا - قم بتحميل الفيديو بالكامل عندما تقوم الصفحة بتحميل التعريف - قم بتحميل البيانات التعريفية فقط عندما لا تقوم الصفحة بتحميل أي شيء - لا تقم بتحميل الفيديو عندما يتم تحميل الصفحة كتم الصوت: عند تعيين هذه السمة، فإنها تحدد أنه يجب كتم صوت إخراج الصوت للفيديو -playsinlinePlaysinline: تشغيل مضمن x5-video-player-type=h5: تمكين x5 core H5 player x5-video-player-fullscreen=إعداد ملء الشاشة الحقيقي. ستؤدي إعدادات true وfalse إلى تخطيطات مختلفة. x5-video-orientation=portraint: يعلن عن الاتجاه الذي يدعمه المشغل. القيم الاختيارية هي شاشة أفقية أفقية وشاشة رأسية عمودية. صورة القيمة الافتراضية. سواء كان بثًا مباشرًا أو H5 بملء الشاشة، يتم تشغيله بشكل عامودي، ولكن هذه السمة تتطلب نوع x5-video-player-type لتمكين وضع H5 -->

 <تشغيل الفيديو تلقائيًا></فيديو>

ومع ذلك، في العديد من متصفحات الأجهزة المحمولة، تكون العملية الفعلية للمستخدم (الأحداث القياسية مثل اللمس أو النقر أو النقر المزدوج أو أحداث الضغط على المفتاح) مطلوبة لتشغيل استدعاء video.play() لتشغيل الصوت والفيديو تلقائيًا.

 dom.addEventListener('click', function () { video.play()})

يمكن أيضًا تشغيل Video.play() في wx.ready()

 wx.ready(function () { video.play()})

قم بتعيين الخاصية webkit-playsinlinePlaysinline

 <معرف الفيديو=video webkit-playsinlinePlaysinline /></video>

عند تشغيل مقاطع الفيديو في iOS Safari وبعض متصفحات Android، لا يمكن تشغيل الفيديو في صفحة h5، وسيتولى النظام تشغيل الفيديو تلقائيًا.

إذا كنت بحاجة إلى تشغيل مقطع فيديو في صفحة h5، فأنت بحاجة إلى إضافة webkit-playsinline إلى علامة الفيديو. بعد iOS 10، تحتاج إلى إضافة playsinline. ويوصى بإضافة هاتين السمتين في نفس الوقت. يحتاج التطبيق أيضًا إلى دعم هذا الوضع.

 webview.allowsInlineMediaPlayback = YES;

يدعم كل من iOS Mobile QQ وWeChat هذا الوضع، لكن Android WeChat يتوقف عن العمل.

يستخدم المتصفح المدمج في Android WeChat نواة Tencent X5 ولا يتبع معيار X5web، حيث يتم فرض فيديو بملء الشاشة. بعد تشغيل الفيديو، ستظهر توصيات الفيديو الخاصة بـ QQ.

يُقال أن لديها قائمة بيضاء، ولن تكون موارد الفيديو في القائمة البيضاء في وضع ملء الشاشة. لكن لم يعد بإمكان Tencent الإضافة إلى القائمة البيضاء. المسالك البولية، لا يوجد حل. . . . . .

يوجد حاليًا حل وهو استخدام h5 Canvas لتشغيل الفيديو

المخاطر التي تمت مواجهتها عند استخدام اللوحة القماشية: يجب أن يضيف الفيديو السمة x5-video-player-type=h5، وإلا فسيظل الفيديو عالقًا على الجهاز المحمول ولا يمكن تشغيله شخصيًا، أعتقد أن السبب هو الاستيلاء على الفيديو.

 <div class=wrapper> <video id=video style=display: none autoplay src=video.mp4 x5-video-player-type=h5></video> <canvas id=canvas></canvas></div> <script> var video = document.querySelector('#video') var Canvas = document.querySelector('#canvas') var Wrapper = Canvas.parentNode var width = Wrapper.offsetWidth var height = Wrapper.offsetHeight var ctx = c.getContext('2d') var time = null Canvas.width = width Canvas.height = height Canvas.addEventListener('click', function () { video.play( ) }) video.addEventListener('play', function () { time = window.setInterval(function () { ctx.drawImage(v, 0، 0، العرض، الارتفاع)؛ }، 20 }، false)؛ video.addEventListener('pause', function () { window.clearInterval(time); }, false); , function () { window.clearInterval(time }, false);</script>

أخيرًا، تم اكتشاف أنه على الرغم من استخدام اللوحة القماشية لتشغيل مقاطع الفيديو، إلا أنه يمكن حظر مقاطع الفيديو الموصى بها بعد تشغيل الفيديو بملء الشاشة في Android WeChat. ولكن لا توجد طريقة لتعطيل مشكلة ملء الشاشة عند تشغيل مقاطع الفيديو. لا تزال تحصل على القائمة البيضاء الشريرة. تقديم الشكاوى. . . . . . . . . . . . . . . .

الأمر الأكثر إزعاجًا هو أنني لم أجد طريقة لتشغيل الخروج بملء الشاشة عبر js.

عند تشغيل مقطع فيديو على نظام iOS، ستظهر شاشة سوداء لفترة وجيزة ثم يتم عرضها بشكل طبيعي.

حل:

أضف قسمًا أعلى الفيديو واملأه بصورة لتكوين وهم التحميل قبل التشغيل. ثم استمع إلى حدث تحديث الوقت وقم بإزالة كتلة div هذه أثناء تشغيل الفيديو.

 video.addEventListener('timeupdate', function(){ if(video.currentTime > 0.1){ PosterImg.hidden(); }})

HTMLVideoElement وHTMLAudioElement كلاهما يرثان من HTMLMediaElement

 // خطأ في الوسائط MediaObj.error; // فارغة: MediaObj.error.code عادي; // 1. إنهاء المستخدم 2. خطأ في الشبكة 3. خطأ في فك التشفير 4. عنوان URL غير صالح // الحالة الحالية للوسائط MediaObj.currentSrc; / العودة إلى المورد الحالي URLMediaObj.src = value; // إرجاع المورد الحالي أو تعيينه URLMediaObj.canPlayType(type); // ما إذا كان يمكن تشغيل الموارد بتنسيق معين MediaObj.networkState; //0. لم تتم تهيئة هذا العنصر 1. عادي ولكن لا يستخدم الشبكة 2. يتم تنزيل البيانات 3. لم يتم العثور على المورد MediaObj.load() // أعد تحميل المورد المحدد بواسطة src MediaObj.buffered؛ العودة إلى المنطقة المخزنة مؤقتًا، TimeRangesMediaObj.preload؛ // لا شيء: لا تقم بتحميل البيانات الوصفية مسبقًا: التحميل المسبق لمعلومات الموارد auto://readystate MediaObj.readyState; //2:HAVE_METADATA //3.HAVE_CURRENT_DATA //4.HAVE_FUTURE_DATA //5.HAVE_ENOUGH_DATAMediaObj.seeking; // سواء كان يبحث عن // حالة التشغيل MediaObj.currentTime = value; موقف MediaObj .startTime؛ // بشكل عام 0، إذا كان دفق الوسائط أو المورد لا يبدأ من 0، فهو ليس 0MediaObj.duration؛ // يُرجع دفق طول المورد الحالي عدداً لا نهائيًا من MediaObj.paused؛ // ما إذا كان سيتم إيقاف MediaObj.defaultPlaybackRate = value // الافتراضي لسرعة التشغيل، يمكنك ضبط MediaObj.playbackRate = value; // سرعة التشغيل الحالية، قم بتغييرها فورًا بعد ضبط MediaObj.played; // إرجاع المنطقة التي تم تشغيلها، TimeRanges، انظر أدناه لمعرفة هذا الكائن MediaObj.seekable؛ // إرجاع المنطقة التي يمكن البحث عنها TimeRangesMediaObj.end؛ // ما إذا كان سيتم إنهاء MediaObj.autoPlay؛ .loop; // نعم تشغيل متكرر MediaObj.play(); // إيقاف مؤقت// التحكم في الفيديو MediaObj.controls;// ما إذا كان هناك شريط تحكم افتراضي MediaObj.volume = value; //Volume MediaObj.muted = value; // كتم // كائن TimeRanges (المنطقة) TimeRanges.length / / المنطقة عدد المقاطع TimeRanges.start(index) // موضع البداية لمنطقة مقطع الفهرس TimeRanges.end(index) // الموضع النهائي لقسم الفهرس //[★★★**الأحداث ذات الصلة**★★★]//توزيع الحدث var eventsTester = function(e){ Media.addEventListener(e, function(){ console.log ((new Date()).getTime(),e) },false);}// مراقبة الأحداث eventsTester(loadstart); // يبدأ العميل في طلب البيانات eventsTester(progress); // يطلب العميل البيانات eventsTester(suspend); // تأخر التنزيل eventsTester(abort); // ينهي العميل التنزيل بشكل نشط (ليس بسبب خطأ) eventsTester(loadstart); التقدم) // يطلب العميل البيانات eventsTester(suspend); // تأخر التنزيل eventsTester(abort); // ينهي العميل التنزيل بشكل نشط (ليس بسبب خطأ)، eventsTester(error); // حدث خطأ عند طلب البيانات eventsTester(stalled); // سرعة الشبكة متوقفة eventsTester(play); // تم الحصول على طول المورد بنجاح eventsTester(loadeddata); //eventTester(waiting); // بدء التشغيل eventsTester(canplay); // يمكن تشغيله، ولكن قد يتم إيقافه مؤقتًا بسبب التحميل eventsTester(canplaythrough); // يمكن تشغيله، تم تحميل جميع الأغاني eventsTester(seeking); /العثور على eventsTester(timeupdate); //تم تغيير وقت التشغيل eventsTester(end); //انتهى التشغيل eventsTester(ratechange); // يتغير طول المورد eventsTester(volumechange); //Volume Changes

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.