تضمين الفيديو في صفحة الويب (HTML)

Question

أريد تضمين مقطع فيديو في صفحة ويب.
لا أريد استخدام الفلاش لأنه غير متوفر لعدد كبير من الأنظمة الأساسية.
أنا متردد في استخدام HTML5 لأنه ليس قياسيًا جدًا حتى الآن (إنه قياسي، ولكن معظم الأشخاص ليس لديهم متصفحات تدعمه)

هل هناك أي طريقة أخرى؟أم هل يجب أن ألتزم بـ HTML5 ولافتة ضخمة تطلب من الأشخاص ترقية متصفحهم؟

Answer 1

وهناك عدد قليل من الطرق للجمع بين HTML5 الفيديو مع fallbacks لمتصفحات غير دعم. وقد ثبت أن هناك عدد قليل من حلول محددة.

ومثال واحد هو الفيديو ل الجميع من Camen التصميم، والتي تتوافق مع HTML5، ويستخدم تعليقات مشروطة ل IE وعلامة الكائن المتداخلة للالمتصفحات القديمة. هذا ينبغي أن يكون متوافق مع المعايير، إلى الوراء متوافقة، وإثبات في المستقبل.

Answer 2

وHTML 5 ليست موحدة. إنه مشروع. ومن المرجح أن تصبح معيار يوم واحد. ومن المرجح تغيير أولا.

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

ومحدد الناس إلى ترقية المتصفح لن يساعد كثيرا. وبقدر ما أعرف، والمتصفح الوحيد مع دعم الفيديو في الإصدار المستقر هو فايرفوكس. الكروم لا يعتمد عليه إلا في نسخة التطوير. لا أعتقد أن أوبرا قد أبرزت بناء مستقرة مع الدعم. مايكروسوفت بالتأكيد لم إضافته إلى برنامج Internet Explorer حتى الان. سفاري لست متأكدا.

إذا كنت تريد حقا أن تجنب فلاش، ثم هل يمكن استخدام كائن HTML 4.01.

<object data="myVideo.ogv" type="video/ogg">
  <!-- fallback content here -->
</object>

... وآمل أن المستخدم لديه في المكونات قادرة على التعامل مع الفيديو المثبتة.

Answer 3

ولقد عدت للتو عبر كورتادو . انها برنامج Java التي تلعب OGG. لدي actualy أن أشكر <م> دايفيد دوروارد لهذا، لأن فحص يصل الوضع HTML5 جعلني تأتي عبرها. يشير فايرفوكس باستخدام شيء مثل:

 <video src="my_ogg_video.ogg" controls width="320" height="240">  
   <object type="application/x-java-applet"  
           width="320" height="240">  
      <param name="archive" value="cortado.jar">  
      <param name="code" value="com.fluendo.player.Cortado.class">  
      <param name="url" value="my_ogg_video.ogg">  
      <p>You need to install Java to play this file.</p>  
   </object>  
 </video>  

وجافا متاحة لمنصات أخرى FAR من فلاش، و، في هذه الحالة، إذا مجرد تراجع إلى HTML5.

و( مصدر )

Answer 4

وأنا أعلم أنه متأخرا بعض الشيء، ولكن لديك نظرة على VLC؟

ويمكن أن تكون جزءا لا يتجزأ في موقع على شبكة الانترنت، يعمل على ويندوز، ماك OS و لينكس، هو حرة ومفتوحة المصدر، ويدعم الكثير من الفيديو / تنسيق الصوت ...

والعيب هو أنه لا يملك واجهة المستخدم الرسومية لطيفة مع تشغيل / إيقاف مؤقت / ضبط حجم / ... وظائف، لديك لإنشاء عليها بنفسك.

ويمكنك إلقاء نظرة على هذا المقال: HTTP: //www.videolan.org/doc/play-howto/en/ch04.html#id310965

Answer 5

وماذا تعتقد الكثير من المواقع الكبيرة استخدام فلاش لتشغيل الفيديو؟ ربما ليس بسبب انها عدم توفرها ... وبطبيعة الحال هناك بدائل لتضمين محتوى الفيديو في صفحات الويب، ولكن إذا توفر هو المشكلة، فلاش هو أفضل وسيلة للذهاب في هذه اللحظة.

Answer 6

لقد عملت على حل هذه المشكلة لأنني مهتم جدًا بـ xHtml+RDFa ووجدت طريقة لتشغيل مقطع فيديو في مستند xHtml 1.0 الصارم على متصفحات HTML5 دون حظر متصفحات HTML5.

لقد قمت بنشر البرنامج المساعد jQuery هنا: https://github.com/charlycoste/xhtml-video

وعرض توضيحي هنا: http://demo.ccoste.fr/video

في الواقع، هذا أقل فاعلية من استخدام علامة HTML5، ولكن على الأقل...إنها تعمل!

يعتمد الحل على جافا سكريبت وقماش ولكن يمكن أن يتحلل بأمان باستخدام <object> العلامات (هذا ما يفعله البرنامج المساعد jQuery الخاص بي).

ما أفعله هو في الواقع بسيط:

1. أقوم بإنشاء فيديو جديد عنصر (ليست علامة) في الذاكرة ولكني لا تضيف إلى مستند DOM:

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

2. أقوم بإنشاء جديد canvas عنصر في الذاكرة ولكن أنا لا تضيف إلى مستند DOM:

   var canvas = document.createElement('canvas');
   

3. أقوم بإنشاء جديد img عنصر و أقوم بإضافته إلى DOM.

   // var parent = ... ;
   // var width = ...;
   // var height = ...;
   var img = document.createElement('img');
   
   img.setAttribute('width', width);
   img.setAttribute('height', height);
   
   parent.appendChild(img);
   

4. عند تشغيل الفيديو (video.play())، أجعله يرسم كل إطار في اللوحة القماشية (وهو أمر غير مرئي، لأنه لم تتم إضافته إلى DOM - مما يجعل DOM يظل مستند xhtml 1.0 صالحًا)

   canvas.getContext("2d").drawImage(video, 0, 0, width, height);
   

5. وأخيراً أستخدم toDataURL() طريقة canvas للحصول على صورة مشفرة base64 للإطار ووضعها في ملف src سمة من img عنصر.

   img.setAttribute('src', canvas.toDataURL());
   

من خلال القيام بذلك، يمكنك جعل كائنات جافا سكريبت تقوم بتشغيل مقطع فيديو خارج DOM وتدفع كل إطار في ملف img عنصر DOM.لذا يمكنك تشغيل الفيديو باستخدام إمكانيات HTML5 للمتصفح، ولكن دون الحاجة إلى مستند HTML5.

وإذا لم يكن لدى المتصفح إمكانيات HTML5 أو إذا لم يتمكن من التعامل مع برنامج الترميز المستخدم، فسوف يلجأ إلى البرنامج الأصلي <object> السلوك (بشكل عام)سيبحث المتصفح عن مكون إضافي مثل VLC، أو ما إلى ذلك...)

وإذا لم تكن هناك طريقة لتشغيل الفيديو (لا يوجد مكون إضافي له)، فسيتم توفير المحتوى البديل داخل <object> سيتم استخدام العلامة.

جانب الأداء:نظرًا لأن ذلك يؤدي إلى عملية استهلاك عالية جدًا، فقد يومض التشغيل...لتجنب ذلك، يمكنك تقليل جودة العرض باستخدام ضغط jpeg بهذه الطريقة: canvas.toDataURL('image/jpeg', quality) أين quality هي قيمة بين 0 و 1.