ما هي HTML5 الفيديو؟
قدمت مواصفات HTML5 عنصر الفيديو لغرض لعب الفيديو، واستبدال جزء من عنصر الكائن.
ويهدف HTML5 الفيديو من قبل المبدعين في أن تصبح الطريقة القياسية الجديدة لإظهار الفيديو على شبكة الإنترنت، بدلا من المعيار فعلي السابق من استخدام الملكية أدوبي فلاش البرنامج المساعد، على الرغم من وأعاق الاعتماد المبكر بسبب عدم الاتفاق على النحو الذي صيغ الفيديو الترميز وينبغي دعم صيغ الترميز الصوت في متصفحات الويب.
كليب اللعب في HTML
قبل HTML5، لم يكن هناك معيار لعرض أشرطة الفيديو على صفحة ويب.
قبل HTML5، لا يمكن إلا أن يكون لعبت الفيديو مع المكونات في (like flash) .
وHTML5 <video> يحدد العنصر طريقة قياسية لتضمين الفيديو في صفحة ويب.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل <video> العنصر.
جزء | |||||
---|---|---|---|---|---|
<video> | 4.0 | تسعة | 3.5 | 4.0 | 10.5 |
وHTML <video> العنصر
لإظهار الفيديو في HTML، استخدم <video> العنصر:
مثال
<video width="320" height="240" controls>
<source src="/html/movie.mp4" type="video/mp4">
<source src="/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
انها محاولة لنفسك » كيف تعمل
و controls السمة يضيف الضوابط الفيديو، مثل اللعب، وقفة، وحجم.
انها فكرة جيدة لتشمل دائما width و height الصفات.
إذا لم يتم تعيين الطول والعرض، والمتصفح لا يعرف حجم الفيديو. وسوف يكون التأثير أن الصفحة سوف تتغير (or flicker) أثناء تحميل الفيديو.
النص بين <video> و </video> سوف علامات عرض فقط في المتصفحات التي لا تدعم <video> العنصر.
متعددة <source> يمكن أن عناصر يرتبط ملفات الفيديو المختلفة. سيقوم المتصفح استخدام تنسيق معترف الأول.
HTML <video> القراءة التلقائية
لبدء الفيديو تلقائيا استخدام autoplay السمة:
مثال
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
انها محاولة لنفسك » و autoplay لا يعمل السمة في الأجهزة المحمولة مثل آي باد وفون.
HTML فيديو - دعم متصفح
حاليا، هناك 3 صيغ الفيديو ل <video> العنصر: MP4، ويب إم، وسطين:
المتصفح | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | NO | NO |
Opera | YES (from Opera 25) | YES | YES |
فيديو HTML - أنواع وسائل الإعلام
تنسيق الملف | نوع الوسائط |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
فيديو HTML - طرق للعقارات، والأحداث
تعرف HTML5 طرق DOM، والخصائص، والأحداث ل <video> العنصر.
وهذا يسمح لك لتحميل واللعب، وقفة الفيديو، فضلا عن تحديد المدة والحجم.
وهناك أيضا أحداث DOM التي يمكن أن يخطر لك عندما يبدأ الفيديو للعب، وبشكل مؤقت، الخ
للإشارة DOM كامل، انتقل إلى لدينا HTML5 الصوت / الفيديو DOM المرجعي .
HTML5 Video الفئات
بطاقة | وصف |
---|---|
<video> | يعرف شريط فيديو أو فيلم |
<source> | يحدد الموارد الإعلامية متعددة لعناصر الوسائط، مثل <video> و <audio> |
<track> | يحدد مسارات النص في وسائل الاعلام اللاعبين |