HTML5 الصوت والفيديو: ما يجب أن تعرفه

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

وقت طويل قبل، في مجرة أن يشعر جداً شوطا بعيداً، الوسائط متعددة على شبكة الإنترنت يقتصر على الرنين الألحان MIDI وملفات Gif المتحركة. كما حصلت على عرض النطاق الترددي أسرع وتحسين تقنيات ضغط، محل الموسيقى MP3 MIDI والفيديو الحقيقية بدأت للحصول على أرض الواقع. جميع أنواع اللاعبين الملكية قاتلت بها – لاعب ريال مدريد, Windows Media، وهلم جرا-حتى واحد برز كالمنتصر في 2005: "أدوبي فلاش"، ويرجع ذلك إلى حد كبير إلى الزمان والمكان في البرنامج المساعد وحقيقة أنه إليه لإنجاز الاختيار يوتيوب.

HTML5 يوفر معياراً المتنافسة، مفتوحة لتوصيل الوسائط المتعددة على شبكة الإنترنت مع الفيديو الأصلي والعناصر الصوتية وواجهات برمجة التطبيقات. تتناول هذه المقالة إلى حد كبير <video>العنصر، حيث أن ذلك أكثر جنسية، ولكن معظم من العلامات وبرمجة قابلة للتطبيق لكلا النوعين من وسائل الإعلام.

الوسائط المتعددة المحلية: لماذا، ماذا، وكيف؟

في عام 2007، كتب أن جانغ فإن الفريق العامل:

"أوبرا لديه بعض البنيات التجريبية الداخلية مع تطبيق <video>العنصر. يعرض العنصر واجهة برمجة تطبيقات بسيطة (اللحظة) مثل الكثير من الكائن Audio(): play ()، pause()، stop (). والفكرة أنه يعمل مثل <object>إلا أن لديها الخاصة <video>مثل الكثير من دلالات <img> دلالات الصورة. 

بينما API زاد في تعقيد، الإعلان الأصلي فإن جانغ وينفذ الآن في جميع المتصفحات الرئيسية، وأثناء كتابة هذا الكتاب أعلنت شركة مايكروسوفت الدعم المرتقب في Internet Explorer 9.

رفيق واضحة <video>عنصر <audio>العنصر؛ أنها تشترك العديد من ميزات مشابهة، حتى في هذا الفصل أننا نناقشها معا وإلا ملاحظة الاختلافات.

<video>: لماذا تحتاج <video>العنصر؟

سابقا، إذا أراد المطورين تضمين الفيديو في صفحة ويب، قد جعل استخدام عنصر <object>، وحاوية عامة "أجسام غريبة". بسبب التناقضات المتصفح، سوف تحتاج أيضا إلى استخدام مسبقاً غير صالح <embed> العنصر ومعلمات كثيرة مكررة. وادي ذلك إلى التعليمات البرمجية التي يتطلع الكثير مثل هذا:

1

2

<object width="425" height="344">

3

  <param name="movie" value="http://www.youtube.com/Âv/9sEI1AUFJKw&hl=en_GB&fs=1&" />

4

  <param name="allowFullScreen" value="true" />

5

  <param name="allowscriptaccess" value="always" />

6

  <embed src="http://www.youtube.com/ Âv/9sEI1AUFJKw&hl=en_GB&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344">

7

  </embed>

8

</object>

<embed>وأخيراً هو موحدة في HTML5؛ فإنه لم يكن جزءا من أي نكهة السابقة (X) HTML.

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

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

عند تضمين مكوّن إضافي في صفحاتك ، فإنك تحجز منطقة رسم معينة يفوضها المتصفح إلى المكوِّن الإضافي. بقدر ما يتعلق بالمتصفح ، تظل منطقة المكون الإضافي مربعًا أسود - لا يعالج المتصفح أي شيء يحدث هناك أو يفسره.

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

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

واحدة من المزايا الرئيسية لعنصر HTML5 الفيديو هو أنه، في النهاية، والفيديو هو مواطن كامل على شبكة الإنترنت. هو لم يعد ألقوا قبالة إلى المناطق النائية من <object>أو عدم صحة <embed> العنصر.

حتى الآن، <video>يمكن أن تكون على غرار العناصر مع المغلق؛ وأنهم يمكن أن يكون حجمها عند التحويم استخدام CSS انتقالات، على سبيل المثال. ويمكن أنب وإعادة عرض على <canvas>مع جافا سكريبت. أفضل للجميع، هو فتح هاكابيليتي الفطرية التي توفر معايير الويب المفتوحة. سابقا، تم تأمين جميع البيانات الخاصة بك الفيديو بعيداً؛ حوصر بت الخاص بك في مربع. مع HTML5 الوسائط المتعددة، أحرار بت الخاص بك يمكن التلاعب بها ولكن تريد.

ما دامت نقطة نهاية http مورد يتدفقون على شبكة الإنترنت، يمكنك فقط الإشارة <video>أو <audio>عنصر في ذلك إلى دفق المحتوى.

ما ليست جيدة للوسائط المتعددة HTML5

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

حماية النسخ هو أحد المجالات التي لا تتعامل مع HTML5 — لا يثير الدهشة، نظراً لأنه معيار يستند إلى الانفتاح. حتى الناس الذين يحتاجون إلى إدارة الحقوق الرقمية هي على الأرجح لن تحتاج إلى استخدام HTML5 الفيديو أو الصوت، وأنها سوف تكون سهلة لتحميل إلى محرك أقراص ثابت <img> الآن. بعض المتصفحات توفر قائمة السياق بسيطة الوصول إلى عنوان URL للفيديو، أو حتى لحفظ الفيديو. (بالطبع، لا تحتاج منا أن نشير إلى أن إدارة الحقوق الرقمية هي مأمورية تنطلي على، على أي حال. كل ما عليك فعله هو تنفير المستخدمين صادقة بينما تسبب الإزعاج طفيفة للقراصنة مخصصة.)

تظل المكونات الإضافية هي الخيار الأفضل لمتصفح لنقل الفيديو والصوت من جهاز المستخدم إلى صفحة الويب مثل Daily Mugshot أو Chat Roulette. (هناك عنصر <device>وليدة الغاية المحددة روديمينتاريلي ل HTML "بوست-5"، ولكن لا يوجد أي دعم في المتصفحات لأنه). بعد فزعا في الوحدة لا يمكن تصورها التي سيمثل عالم بدون "دردشة الروليت"، تنظر أيضا كمية هائلة من المحتوى إلى هناك سوف تتطلب الإضافات لجعله لفترة طويلة قادمة.

تشريح لعنصر الفيديو

في أبسط، بما في ذلك الفيديو على صفحة في HTML5 يتطلب مجرد هذه التعليمات البرمجية:

1

2

<video src=turkish.ogv></video>

يتم استخدام ملحق الملف.ogv هنا للإشارة إلى فيديو ثيورا سطين.

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

1

2

<h1>Video and legacy browser fallback</h1>

3

<video src=leverage-a-synergy.ogv>

4

   Download the <a href=leverage-a-synergy.ogv>How to leverage a synergy video</a> 

5

</video>

فيديو HTML5 في متصفح الحديثة والمحتوى الاحتياطي في مستعرض قديم.

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

التشغيل التلقائي

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

1

2

<video src=leverage-a-synergy.ogv autoplay> </video>

عناصر التحكم

توفر عناصر التحكم هو حوالي 764% أفضل من autoplaying الفيديو الخاص بك. يمكنك استخدام بعض جافا سكريبت بسيط لكتابة الخاصة بك الخاصة (أكثر على ذلك لاحقاً)، أو يمكنك أن تقول للمتصفح لتوفر لهم تلقائياً:

1

2

<video src=leverage-a-synergy.ogv controls> </video>

وبطبيعة الحال، هذه تختلف بين المتصفحات، بنفس الطريقة التي تفعل عناصر تحكم النماذج، على سبيل المثال، ولكن سوف تجد شيئا من المستغرب جداً. هناك تبديل تشغيل/إيقاف مؤقت، وشريط البحث، والتحكم بحجم الصوت.

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

كروم وسفاري لديك مشاكل مع إمكانية الوصول إلى لوحة المفاتيح. ونتوقع إمكانية الوصول إلى لوحة المفاتيح زيادة كالحديد مصنعين من المشاكل العويصة.

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

إذا كان <audio>عنصر يحتوي على سمة الضوابط، سترى منهم على الصفحة. دون السمة، أي شيء يتم تقديم بصريا على الصفحة على الإطلاق، ولكن هو، بطبيعة الحال، هناك في DOM والتحكم الكامل عبر واجهات برمجة التطبيقات الجديدة وجافا سكريبت.

ملصق

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

إذا كنت لا تستخدم السمة ملصق، المستعرض يعرض الإطار الأول من الفيلم، الذي قد لا تكون الصورة التمثيلية التي تريد إظهارها.

الطول، العرض

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

إذا قمت بتحديد قيمة واحدة، ولكن ليس الآخر، يضبط المستعرض حجم البعد غير محدد للمحافظة على نسبة العرض إلى الارتفاع للفيديو.

1

2

<video src=leverage-a-synergy.ogv autoplay> </video>

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

حلقة

حلقة السمة سمة منطقية أخرى. كما كنت أتصور، الحلقات تشغيل الوسائط.

التحميل المسبق

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

1

<video src=leverage-a-synergy.ogv controls preload> </video>

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

1

1. preload=auto (or just preload)

اقتراح للمستعرض فإنه ينبغي أن يبدأ تحميل الملف بأكمله. علما بأن نقول "الاقتراح". المستعرض قد تجاهل هذا – ربما لأنه اكتشف بطيئة جداً الاتصال أو إعداد في مستعرض الجوال "ابدأ التحميل المسبق لوسائل الإعلام" لحفظ عرض النطاق الترددي المستخدم.

1

2. preload=none

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

1

3. preload=meta

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

src

على  <img>، يشير هذه السمة إلى ملف ليتم عرضها. ومع ذلك، لأنه ليس جميع المتصفحات يمكن أن تلعب نفس تنسيقات، في بيئات الإنتاج تحتاج إلى ملف مصدر واحد أو أكثر. سنقوم تغطية هذا في المقطع التالي. باستخدام ملف مصدر واحد باستخدام السمة src فقط مفيدة حقاً للنماذج الأولية السريعة أو لمواقع إنترانت حيث تعرف المستعرض الخاص بالمستخدم وبرامج الترميز الذي يدعم.

برامج الترميز – الرعب، والرعب

فرضت المسودات المبكرة لمواصفات HTML5 أن جميع المتصفحات يجب أن تحتوي على الأقل على دعم مضمن للوسائط المتعددة في برنامجي تشفير: Ogg Vorbis للصوت و Ogg Theora للأفلام. Vorbis هو برنامج ترميز تستخدمه خدمات مثل Spotify ، من بين أشياء أخرى ، وبالنسبة للعينات الصوتية في ألعاب مثل Microsoft Halo ، غالبًا ما يتم استخدامه مع Theora للفيديو ويتم دمجه معًا في تنسيق حاوية Ogg.

ومع ذلك، برامج الترميز هذه أسقطت من المواصفات HTML5 بعد أن اعترضت أبل ونوكيا، حيث أن المواصفات لا يقدم أي توصيات حول برامج الترميز في جميع. وهذا يترك لنا وضعا مجزأة. أوبرا وفايرفوكس دعم ثيورا وفوربيس. لا سفاري، مفضلين بدلاً من ذلك تقديم دعم أصلي لترميز الفيديو H.264 وصوت MP3. وقد أعلنت شركة مايكروسوفت أن IE9 كما يدعم H.264، الذي تدعمه أيضا على أي فون والروبوت. يدعم Google Chrome كل من Theora و H.264 ، وصوت Vorbis و MP3. الخلط؟

كما أننا تم الانتهاء من هذا الكتاب، أعلنت شركة جوجل أنه يتم فتح مصادر تسمى VP8 ترميز فيديو. وهذا برنامج ترميز ذات جودة عالية جداً، وعندما يقترن فوربيس في شكل حاوية استناداً إلى الشكل متروسكا، المعروفة ب "webM".

أوبرا، فايرفوكس، والكروم قد أعلنت أنها سوف تدعم ذلك. وسوف IE9، إذا تم تثبيت برنامج الترميز بشكل منفصل. سيتم تضمين VP8 في "فلاش لاعب" أدوبي وسيكون كل فيديو يوتيوب في شكل webM.

مثل ثيورا، برنامج ترميز خالية من الإتاوات. في هذا الفصل ، يمكنك استبدال أمثلة .ogv بـ .webm للحصول على فيديو عالي الجودة ، بمجرد توفر دعم المتصفح.

إيقاف صحفي: علة باد: منذ الذهاب إلى الصحافة قال كنا من الشوائب التي تؤثر على بعض ولاب توب وهذا يعني أنها يمكن فقط قراءة الأول <source>العنصر. ولذلك ينبغي أن يأتي إصدار mp4 قبل الإصدار المجاني الخاص بك في النظام المصدر.

القاعدة: توفير كل الإتاوات الحرة (webM أو ثيورا) و

فيديو H.264 في صفحاتك ، وكل من Vorbis و MP3 audio حتى لا يتم حظر أي شخص من المحتوى الخاص بك. دعونا لا نكرر أخطاء شارات "أفضل عرض في Netscape Navigator" القديمة على مواقع الإنترنت.

عدة <source>عناصر

للقيام بهذا، تحتاج إلى ترميز الوسائط المتعددة الخاصة بك مرتين: مرة ثيورا ومرة H.264 في حالة الفيديو، وفي فوربيس و MP3 للصوت.

ثم، يمكنك ربط هذه إصدارات منفصلة من الملف إلى عنصر الإعلام. بدلاً من استخدام السمة src واحد، يمكنك تداخل منفصلة <source>عناصر لكل ترميز مع سمات النوع المناسب داخل <audio>أو <video>العنصر والسماح المستعرض تحميل الشكل الذي يمكن أن يعرض.

لاحظ أن في هذه الحالة أننا لا نقدم سمة src في عنصر الوسائط نفسها:

1

2

<video controls>

3

    <source src=leverage-a-synergy.ogv type=’video/ogg; codecs="theora, vorbis"'>

4

    <source src=leverage-a-synergy.mp4 type=’video/mp4; codecs="avc1.42E01E, mp4a.40">

5

 <p>Your browser doesn’t support video.

6

 Please download the video in <a href=leverage-a-synergy.ogv>Ogg</a> or <a href=leverage-a-synergy.mp4>mp4</a> format.</p>

7

</video>

خط 1 إعلام المستعرض أن فيديو هو المراد إدراجها وإعطائها عناصر التحكم الافتراضية.

السطر 2 عروض فيديو ثيورا سطين ويستخدم السمة type لإعلام المتصفح يستخدم أي نوع من تنسيق حاوية (عن طريق إعطاء نوع MIME الملف)، وتم استخدام ما هو الترميز لترميز دفق الصوت والفيديو. كما يمكن أن نقدم فيديو WebM هنا كخيار الإتاوات الحرة عالية الجودة. لاحظ أن علينا استخدام علامات الاقتباس حول هذه المعلمات. إذا كنت تفوت على السمة type، التنزيلات متصفح الأرقام قليلاً صغيرة من كل ملف قبل ذلك فغير معتمد، النفايات عرض النطاق الترددي ويمكن أن تؤخر تلعب وسائل الإعلام.

المحتوى بين العلامات هو الاحتياطي المحتوى فقط للمستعرضات التي لا تدعم <video>عنصر على الإطلاق. لن يتم عرض مستعرض الفيديو HTML5 وتفهم ولكن لا يمكن أن تلعب أي من تنسيقات الرمز يشير إلى محتوى "الاحتياطي" بين العلامات. هذا وقد عض لي في الأسفل عدة مرات. للأسف، لا يوجد أي سجل الفيديو هذا.

سطر 3 عروض فيديو H.264. تكون سلاسل برامج الترميز لـ H.264 و AAC أكثر تعقيدًا من تلك الخاصة بـ Ogg نظرًا لوجود عدة ملفات تعريف لـ H.264 و AAC. التشكيلات الجانبية أعلى تتطلب أكثر من وحدة المعالجة المركزية لفك، ولكنها المضغوطة بشكل أفضل واتخاذ عرض نطاق ترددي أقل.

داخل <video>هو عنصر رسالتنا الاحتياطية، بما في ذلك وصلات إلى كل من الأشكال للمستعرضات التي يمكنك التعامل أصلاً مع أي نوع الفيديو ولكن الذي هو على الأرجح على رأس نظام التشغيل التي يمكن التعامل مع أحد التنسيقات، حيث يمكن المستخدم من تحميل الملف والطاقم ح أنه في media player خارج المستعرض.

حسنا، هذا هو الأصلي HTML5 الفيديو لكافة مستخدمي المتصفحات الحديثة. ماذا عن مستخدمي المتصفحات القديمة – بما في ذلك إنترنت إكسبلورر 8 وكبار السن؟

الفيديو لإرث المتصفحات

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

تذكر أن المحتويات <video>عنصر يمكن أن يحتوي على علامات، مثل النص والارتباطات الموجودة في المثال السابق؟ لأن نوع الملف MP4 أيضا يمكن أن يؤديه فلاش لاعب البرنامج المساعد، يمكنك استخدام الفيلم MP4 في تركيبة كاحتياطي لإنترنت إكسبلورر 8 والإصدارات القديمة من المتصفحات الأخرى.

التعليمات البرمجية لهذا البشعة كما كنت تتوقع للاختراق انتقالية، لكنه يعمل في كل مكان يتم تثبيت "مشغل فلاش" – التي هي في كل مكان تقريبا. يمكنك أن ترى هذه التقنية الرائعة في مقال يدعى "فيديو للجميع!" من قبل مخترعها ، Kroc Camen.

وبدلاً من ذلك، يمكن استضافة المحتوى الاحتياطي في موقع استضافة فيديو وتضمين ارتباط إلى بين العلامات عنصر الفيديو:

1

2

<video controls>

3

   <source src=leverage-a-synergy.ogv type=’video/ogg; codecs="theora, vorbis"’>

4

   <source src=leverage-a-synergy.mp4 type=’video/mp4; codecs="avc1.42E01E, mp4a.40.2"’> 

5

   <embed src="http://www.youtube.com/v/cmtcc94Tv3A&hl=en_GB&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344">

6

</video>

يمكنك استخدام مكتبة html5media لخطف <video>إضافة العنصر و automagically الاحتياطية اللازمة بإضافة خط واحد جافا سكريبت في رأس الصفحة الخاصة بك.

ترميز الصوت والفيديو المجاني

ومن الناحية المثالية، يجب أن تبدأ عملية التحويل من تنسيق المصدر نفسه، بدلاً من إعادة ضغط إصدار مضغوط مسبقاً. ضغط مزدوج يمكن أن تقلل من جدية جودة الناتج النهائي.

من ناحية الصوت من الأشياء، الصوت المصدر المفتوح برامج الجرأة تحرير يحتوي على دعم مضمن لتصدير فوربيس. لتحويل الفيديو، وهناك عدد قليل من الخيارات الجيدة. من أجل. WebM، هناك فقط بعض الترميز في هذه اللحظة، لم يكن مفاجئاً لمثل هذا ترميز جديد. راجع www.webmproject.org/tools/لقائمة متزايدة.

يمكن لتطبيق evom المجاني جعل Ogg Theora على جهاز Mac من خلال واجهة رسومية جميلة. يمكن لمستخدمي Windows و Mac تنزيل برنامج Miro Video Converter ، الذي يسمح لك بسحب ملف إلى نافذته للتحويل إلى Theora أو H.264 المحسنة لأجهزة مختلفة مثل iPhone ، و Android Nexus One ، و PS2 ، وما إلى ذلك.

يمكن لـ VLC المجاني تحويل الملفات إلى Ogg على Windows أو Linux. OggConvert هو أداة مفيدة لمستخدمي لينكس.

بالتناوب ، يوفر امتداد Firefox Firefogg وموقع الويب المرتبط به تحويلاً سهلاً على الويب. يحول TinyOgg مقاطع فيديو الفلاش إلى Ogg للتنزيل ، بل ويمكن أيضًا توفير عنوان URL على YouTube.

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

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

إرسال ملفات الفيديو مضغوطة بشكل مختلف للأجهزة المحمولة

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

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

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

هذه الوظائف وبناء الجملة هو استعار من مواصفات CSS استعلامات وسائل الإعلام إنما هو جزء من العلامات، كما أننا كنت تبديل الملفات المصدر اعتماداً على خصائص الجهاز. في المثال التالي ، يتم "طلب" المتصفح إذا كان حجمه أقل من عرض 800 بكسل ، أي أنه يحتوي على شاشة عريضة؟ إذا كان كذلك ، يتلقى hi-res.ogv؛ إذا لم يكن الأمر كذلك ، يتم إرساله lo-res.ogv:

1

2

<video controls> 

3

   <source src=hi-res.ogv ... media="(min-device-width: 800px)"> 

4

   <source src=lo-res.ogv>

5

</video>

لاحظ أيضا أنه يجب عليك لا يزال استخدام السمة type مع المعلمات الترميز ومحتوى الاحتياطية التي نوقشت سابقا. نحن لقد أغفل تلك للوضوح فقط.

عناصر التحكم المخصصة المتداول

أحد جوانب العنصر الإعلامي، وذلك الصوت وعناصر الفيديو، سبيفينج حقاً أن API جافا سكريبت السوبر سهلة. API لكل من الصوت والفيديو تنحدر من نفس الوسائط API، حيث أنهم تقريبا بالضبط نفس الشيء. والفرق الوحيد في هذه العناصر أن عنصر الفيديو سمات الارتفاع والعرض وسمه ملصق. الأحداث، والأساليب، وجميع السمات الأخرى هي نفسها. مع أخذ ذلك في الاعتبار، سنقوم العصا مع العنصر الإعلامي أكثر جنسية: <video>عنصرا لمناقشتنا سكريبت.

كما رأيتم في بداية هذا الفصل ، تتحدث آن فان كيستيرين عن واجهة برمجة التطبيقات الجديدة ، وأن لدينا طرقًا بسيطة جديدة مثل play () ، وقفة () (لا توجد طريقة توقف: ببساطة توقف مؤقت ، والانتقال إلى البداية) ، load () و canPlayType (). في الواقع، هو أن جميع الأساليب على عنصر الوسائط. كل شيء آخر هو الأحداث وسمات.

استخدام وسائط الإعلام الجديدة API وجافا سكريبت يمكنك إنشاء وإدارة عناصر مشغل الفيديو الخاص بك. في المثال الخاص بنا، نحن المشي لكم من خلال بعض الطرق للتحكم في عنصر الفيديو وإنشاء مجموعة بسيطة من عناصر التحكم. هذا المثال لن ضربة عقلك – أنها ليست مثيرة كعنصر الفيديو نفسه تقريبا (وهو القليل المفتعلة!) — ولكن سوف تحصل على فكرة جيدة عن ما هو ممكن من خلال البرمجة النصية. أفضل قليلاً من أن واجهة المستخدم جميع CSS و HTML. إذا كنت تريد أن النمط هو الطريقة الخاصة بك، فإنه من السهل مع قليلاً فقط من ويب المعايير المعرفة – لا حاجة تحرير لاعب فلاش خارجي أو ما شابه ذلك.

لدينا ضوابط الملفوفة مشغل الفيديو الأساسي سوف يكون زر تبديل تشغيل/إيقاف مؤقت وتسمح للمستخدم بفرك على طول الفترة الزمنية للفيديو للانتقال إلى قسم محدد.

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

1

2

<video controls> 

3

   <source src="leverage-a-synergy.ogv" type="video/ogg" /> 

4

   <source src="leverage-a-synergy.mp4" type="video/mp4" /> 

5

   Your browser doesn’t support video. Please download the video in 

6

   <a href="leverage-a-synergy.ogv">Ogg</a> or <a href="leverage-a-synergy.mp4">MP4</a> format.

7

</video> 

8

9

<script> 

10

  var video = document.getElementsByTagName('video’)[0]; 

11

  video.removeAttribute('controls’); 

12

</script>

اللعب، ووقفه، وتشغيل تبديل

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

1

<button class="play" title="play">& #x25BA;</button>

نحن استخدام & #25BA، وهو كيان XML هندسية التي تبدو وكأنها زر تشغيل. بمجرد النقر فوق الزر، سنقوم بتشغيل الفيديو وتبديل القيمة لاثنين من الأنابيب باستخدام & #x2590، الذي يشبه وقفه (قليلاً).

للبساطة، ولقد تضمنت عنصر زر كالعلامات، ولكن كما أننا كنت تدريجيا تعزيز الضوابط الفيديو لدينا، جميع هذه العناصر الإضافية (للعب ووقفه، وتنقية، وهلم جرا) يجب أن يتم إنشاء طريق جافا سكريبت.

في تبديل تشغيل/إيقاف مؤقت لدينا عدد من الأشياء التي يتعين القيام به:

• إذا كان الفيديو حاليا متوقفة مؤقتاً، بدء تشغيل، أو إذا انتهت الفيديو ثم نحن بحاجة إلى إعادة تعيين الوقت الحالي إلى 0، فنقل playhead العودة إلى بداية الفيديو.
• قم بتغيير قيمة زر تبديل تظهر في المرة التالية التي يقوم المستخدم بالنقر فوق، أنه سيتم تبديل من إيقاف مؤقت للعب أو اللعب لوقفه.
• أخيرا، نحن اللعب (أو إيقاف) الفيديو:

1

2

if (video.paused || video.ended) {

3

   if (video.ended) {

4

      video.currentTime = 0;

5

}

6

   this.innerHTML = ' ’; // & #x2590 & #x2590 doesn’t need escaping here

7

   this.title = 'pause’;

8

   video.play(); 

9

} else {

10

   this.innerHTML = ' ’; // & #x25BA

11

   this.title = 'play’;

12

   video.pause(); 

13

}

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

عناصر الوسائط المليئة بالأحداث

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

1

2

if (video.ended) {

3

   video.currentTime = 0; 

4

} 

5

if (video.paused) {

6

   video.play(); 

7

} else {

8

   video.pause(); 

9

} // which could be written as: video[video.paused ? 'play’ : 'pause’]();

في هذه الأمثلة ، نحن نستخدم واجهة برمجة التطبيقات (API) الخاصة بـ addEventListener DOM level 2 ، بدلاً من attachEvent ، وهي خاصة بـ Internet Explorer حتى الإصدار 8. ستقوم IE9 المرتقب بدعم الفيديو ، ولكن من الجيد أن تدعم أيضًا addEventListener القياسي ، لذا ستعمل الكود هناك أيضًا.

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

1

2

video.addEventListener('play’, function () { 

3

   play.title = 'pause’; 

4

   play.innerHTML = ' ’;

5

}, false);

6

7

video.addEventListener('pause’, function () { 

8

   play.title = 'play’; 

9

   play.innerHTML = ' ’;

10

}, false); 

11

12

video.addEventListener('ended’, function () { 

13

   this.pause(); 

14

}, false);

الآن كلما الفيديو لعبت، مؤقتاً، أو قد وصلت إلى النهاية، أطلقت الدالة المرتبطة بالأحداث ذات الصلة، مع التأكد من أن لدينا التحكم يظهر التسمية الصحيحة.

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

رصد التقدم المحرز في التحميل

العنصر الإعلامي قد حدث "تقدم"، الذي وقع مرة واحدة وقد تم جلب وسائل الإعلام ولكن يحتمل أن تكون قبل قد تمت معالجته بوسائل الإعلام. عندما وقع هذا الحدث، يمكننا قراءة الفيديو. كائن قابل للبحث، والذي له أسلوب طول و start () و end (). يمكن أن نقوم بتحديث موقعنا شريط باستخدام التعليمات البرمجية التالية (حيث المتغير المخزن المؤقت هو العنصر الذي يظهر مقدار الفيديو يمكن أن نسعى وتم تحميلها) البحث:

1

2

video.addEventListener('progress’, updateSeekable, false);

3

function updateSeekable() {

4

   var endVal = this.seekable && this.seekable.length ? this.seekable.end() : 0;

5

   buffer.style.width = (100 / (this.duration || 1) * endVal) + '%’; 

6

}

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

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

1

2

video.addEventListener('durationchange’, updateSeekable, false); 

3

video.addEventListener('progress’, updateSeekable, false); 

4

function updateSeekable() {

5

   buffer.style.width = (100 / (this.duration || 1) *

6

   (this.seekable && this.seekable.length ? this.seekable.end() : 0)) + '%’; 

7

}

عندما يكون "ملف الوسائط" على استعداد للعب

عندما يصادف المتصفح الخاص بك أولاً عنصر الفيديو (أو الصوت) على صفحة، ملف الوسائط غير جاهز للتشغيل فقط حتى الآن. المتصفح يحتاج إلى تحميل وثم فك ترميز الفيديو (أو الصوت) حيث يمكن تشغيلها. بمجرد أن يتم إكمال عنصر الوسائط سيتم إطلاق الحدث canplay. عادة هذا الوقت كنت تهيئة عناصر التحكم الخاصة بك وإزالة أي مؤشر "تحميل". لذا لدينا التعليمات البرمجية لتهيئة عناصر التحكم عادة سيبدو هذا:

1

video.addEventListener('canplay’, initialiseControls, false);

شيء رهيب إثارة هناك. Initialisation تحكم تمكين الزر تبديل تشغيل/إيقاف مؤقت ويعيد playhead في شريط البحث.

الأحداث التي يجب القيام بها مع تحميل النار في الترتيب التالي: loadstart ، و durationchange ، loadeddata ، والتقدم ، canplaythrough ، canplaythrough.

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

1

video.addEventListener('loadeddata’, initialiseControls, false);

بيانات تعريف التحميل

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

التقديم السريع والبطيء، وعكس

المواصفات توفر سمة، بلايباكراتي. بشكل افتراضي هو بلايباكراتي المفترضة 1، معنى التشغيل العادي بسرعة مضمن من ملف وسائط. زيادة هذه السمة يسرع في القراءة؛ في التناقص فإنه يبطئ عليه. القيم السالبة تشير إلى أن شريط الفيديو سوف تلعب في الاتجاه المعاكس.

ليست كافة المستعرضات تدعم بلايباكراتي بعد (المستعرضات فقط المستندة إلى بكت تؤيده الآن)، حتى إذا كنت بحاجة إلى دعم التقديم السريع والترجيع، يمكنك هاك حول هذا عن طريق تغيير برمجياً كورينتيمي:

1

2

function speedup(video, direction) {

3

   if (direction == undefined) direction = 1; // or -1 for reverse

4

   if (video.playbackRate != undefined) { 

5

      video.playbackRate = direction == 1 ? 2 : -2; 

6

   } else { // do it manually

7

      video.setAttribute('data-playbackRate’, setInterval ((function playbackRate () { 

8

         video.currentTime += direction; 

9

         return playbackRate; // allows us to run the function once and setInterval

10

      })(), 500)); 

11

   } 

12

}

13

14

function playnormal(video) { 

15

   if (video.playbackRate != undefined) { 

16

      video.playbackRate = 1; 

17

   } else { // do it manually clearInterval(video.getAttribute('data-playbackRate’)); } 

18

}

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

إمكانية الوصول إلى الوسائط المتعددة

لقد تحدثنا عن إمكانية الوصول إلى لوحة المفاتيح لعنصر الفيديو، ولكن ماذا عن النصوص، التسميات التوضيحية للوسائط المتعددة؟ بعد كل شيء، هناك لا سمة alt للصوت أو الفيديو كما يوجد ل <img> . المحتوى الاحتياطي بين العلامات المقصود فقط للمستعرضات التي لا يمكن التعامل مع الفيديو الأصلي؛ ليس للناس المتصفحات التي يمكن عرض وسائط الإعلام ولكن لا يمكن مشاهدته أو سماعة بسبب الإعاقة أو الحالة (على سبيل المثال، في بيئة صاخبة، أو الحاجة إلى المحافظة على النطاق الترددي).

نظرية إمكانية الوصول إلى الوسائط المتعددة HTML5 ممتاز. المؤلف الأصلي وينبغي جعل ملف الترجمة ووضعها في حاوية أغ أو ملف MP4 جنبا إلى جنب مع ملفات الوسائط المتعددة، وسوف نقدم المستعرض واجهة مستخدم حيث يمكن المستخدم من الحصول على تلك التسميات التوضيحية أو العناوين الفرعية. حتى إذا كان الفيديو "مضمن" على 1000 من المواقع المختلفة (ببساطة باستخدام عنوان URL خارجي كمصدر لعنصر الفيديو/الصوت)، الحصول هذه المواقع على معلومات الترجمة مجاناً، حيث يمكننا الحصول على إمكانية الوصول إلى "الكتابة مرة واحدة، اقرأ في كل مكان".

وهذا النظرية. في الممارسة العملية، لا أحد يعرف كيفية القيام بذلك؛ المواصفات الصمت، والمتصفحات لا تفعل شيئا. هذا هو بداية لتغيير؛ في وقت كتابة هذا (مايو 2010)، إضافة واتوج جديدة <track>عنصر للمواصفات، مما يسمح بالإضافة لأنواع مختلفة من المعلومات مثل ترجمات والتسميات التوضيحية، والوصف، وعناوين الفصول والفوقية.

يحدد WHATWG تنسيقًا جديدًا للوقت المحدد يسمى WebSRT لهذه المعلومات ، وهو أحد الأسباب التي تجعل هذا العنصر 29 غير الظاهر في إصدار W3C للمواصفات. التنسيق <track>العنصر:

1

<track kind=captions src=captions.srt

ولكن ما الذي يمكنك القيام به الآن؟ لا يوجد واحد ينطبق نهج لهذه المشكلة، ولكن سوف نقدم هنا أحد الحلول المؤقتة المحتملة (ولو hacky).

قدم بروس دليلاً على المفهوم الذي يعرض السطور الفردية للنص ، والتي تم ختم طابعها باستخدام سمات HTML5 data- * الجديدة:

1

2

<article class=transcript lang=en> 

3

   <p><span data-begin=3 data-end=5>Hello, good evening and welcome.</span> 

4

   <span data-begin=7.35 data-end=9.25>Let’s welcome Mr Last Week, singing his poptabulous hit &ldquot;If I could turn back time!&rdquot;</span> 

5

   </p> 

6

   ... 

7

</article>

جافا سكريبت يستخدم لإخفاء النسخة <article>، وربط إلى الحدث تيميوبداتي لل API الفيديو، وتراكب يمتد كنص عادي (إرشادات لذلك مع CSS) عبر (أو بجوار) عنصر الفيديو، اعتماداً على الوقت الحالي تشغيل الفيديو والطوابع الزمنية على يمتد الفردية. انظر في العمل هنا.

ال بي بي سي لديها تجربة مماثلة تأخذ في الترجمة من ملف سكريبت خارجي، وأقرب إلى رؤية HTML5، ولكن ليس بالآثار الجانبية للسماح لمحركات البحث لفهرسة محتويات النسخة.

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

البيانات- * السمات (سمات البيانات المخصصة)

يسمح HTML5 السمات المخصصة على أي عنصر. وهذه يمكن استخدامها لتمرير المعلومات إلى البرامج النصية المحلية.

سابقا، لتخزين البيانات المخصصة في ترميز الخاص بك، المؤلفين أن تفعل شيئا مزعج مثل استخدام فئات:<input class="spaceship shields-5 lives-3 energy-75">. ثم أن السيناريو الخاص بك بحاجة إلى إضاعة الوقت الاستيلاء على أسماء هذه الفئة، مثل الدروع-5، تقسيم لهم في محدد (واصلة في هذا المثال) لاستخراج القيمة. في هذا الكتاب، يشرح PPK على جافا سكريبت (جديد الدراجين، ردمك 0321423305)، بيتر بول كوش كيفية القيام بهذا، وماذا انتخب لاستخدام السمات المخصصة في بعض صفحات HTML4، جعل جافا سكريبت أصغر حجماً وأسهل للكتابة ولكن أيضا جعل الصفحة غير صالحة من الناحية الفنية. كما أنه أسهل بكثير لاستخدام البيانات-دروع = 5 لتمرير زوج الاسم/القيمة للبرامج النصية، HTML5 يقب وستاندارديسيس هذه الممارسة مفيدة، في العالم الحقيقي.

كانوا يستخدمون data-begin و data-end يمكنهم فقط أن يكونوا مشرعين data-start و data-finish, أو (في نوع مختلف من الفيديو) data-ooh-matron و data-slapandtickle. مثل اختيار أسماء فئة أو معرف، يجب أن تختار اسم يطابق الدلالات.

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

المواصفات ويقول "هذه السمات غير معدّة للاستخدام من قبل البرامج التي مستقلة عن الموقع الذي يستخدم السمات" وغير معدّة لذلك لتمرير المعلومات إلى الزواحف أو موزعي طرف ثالث. وهذا وظيفة ل microformats أو microdata أو RDFa.

عندما data-* يتم دعم السمات بالكامل في المستعرض ، يمكن لجافا سكريبت الوصول إلى الخصائص باستخدام element.dataset.foo (حيث تحتوي السمة data-foo على القيمة). يمكن محاكاتها دعم استخدام JavaScript بتوسيع الكائن هتمليليمينت، والتي عادة ما لم يكن ممكناً في الإفراج ألفا IE9، وأدناه، يمكنك أن ترى هنا. وإلا يمكن الوصول إلى البرامج النصية القيم عن طريق أساليب get/setAttribute. استفادة الخاصية dataset عبر setAttribute هو أنه يمكن تعداد، ولكن أيضا، عندما تنفذ تنفيذا كاملا في المستعرضات، تعيين سمة dataset تلقائياً تعيين سمة المحتوى على عنصر مما يتيح لك بناء جملة مختصرة للإعداد المخصص البيانات.

للحصول على مزيد من المعلومات، انظر المواصفات.

ملخص

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

على الجانب الإيجابي، لأن الفيديو والصوت هي الآن عناصر العادية المعتمدة أصلاً بالمتصفح (بدلاً من البرنامج المساعد "صندوق الأسود")، وتوفر واجهة برمجة تطبيقات قوية، أنهم سهلة للغاية لعنصر التحكم عن طريق جافا سكريبت. مع أي شيء أكثر قليلاً من معرفة معايير الويب، يمكن للمطورين بسهولة إنشاء عناصر التحكم المخصصة الخاصة بهم، أو القيام بكل أنواع التلاعب الفيديو مجنون مع فقط بضعة أسطر من التعليمات البرمجية. كشبكة أمان للمستعرضات التي لا يمكن التعامل، نوصي أن يمكنك أيضا إضافة وصلات لتحميل ملفات الفيديو الخاصة بك خارج <video>عنصر.</video>

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

الوصول إلى فيديو مع جافا سكريبت أكثر من كتابة لاعبين جدد. في الفصل التالي، سوف تتعلم كيفية التعامل مع عناصر الوسائط الأصلية لبعض تأثيرات مذهلة حقاً. أو على الأقل، كذاب رؤوسنا حول الشاشة، والذين يمكن أن نتصور أي شيء أمازينجير من ذلك؟

شراء الكتاب

وقد تفوقت هذه المقالة من تقديم HTML5 بواسطة بروس لوسون وريمي شارب. حقوق الطبع والنشر © 2011. تستخدم مع إذن بيرسون التعليم، وشركة و "ركاب جديدة".