رفتن به مطلب

استفاده کامل از قابلیت های تگ Video در HTML5


پست های پیشنهاد شده

درود

مدتیست که در حال استفاده از قابلیت های HTML5 در یک وردپرس Self-Hosted می باشم در حال حاظر از قابلیت پخش فایل های ویدئویی آن استفاده میکنم حالا می خواهم بطور کامل از قابلیت های تگ Video استفاده کنم.

برای گذاشتن یک یک ویدئو برای پخش در وردپرس یک پست جدید باز می کنم و در قسمت "ویرایش HTML" کد زیر را قرار می دهم:

این ساده ترین حالت است


<video width="525" height="400" controls="controls"><source src="dl2/Video/Player/Suprise.Call.of.Duty.webm" type="video/webm" /></video>

ویدئو بدون هیچ مشکلی در مرورگر های مختلف نشان داده می شود

با اضافه کردن دستورات مختلف بین تگ ویدئو می شود تنظیمات مختلفی روی ویدئو پلیر اعمال کرد مثله:

امکانات تایید شده:

  • قرار دادن فرمت های مختلف ویدئویی در یک پلیر تا اگر مرورگری فرمتی را پشتیبانی نکرد اولین ویدئویی که فرمت آن را پشتیبانی می کند بصورت خودکار انتخاب شود
  • اندازه پنجره که در مثال بالا قرار دارد
  • اضافه کردن یا غیر فعال کردن کنترل های مختلف نظیر Seeking، Volume ، Play ، Pause ، Fullscreen toggle ، Captions/Subtitles (when available)، Track (when available)
  • پخش بصورت خودکار بعد از لود شدن صفحه
  • بافر کردن بصورت خود قبل از بخش
  • انتخاب یک پوستر پیشنمایش برای ویدئو مورد نظر (قبل از لود شدن فایل ویدئویی نشان داده می شود)
  • ویدئو بدون صدا پخش شود
  • ویدئو بصورت لوپ یکسره پخش شود
  • ساختن یک لای اوت که در تمام مرورگر ها یکسان نشان داده شود.
  • اینها امکاناتی بودند که در سایت w3schools.com معرفی شده بودند

امکانات احتمالی:

  • نشان دادن تصاویر کوچ در بالای نوار پیمایش ویدئو"Preview Thumbnails on Seek" مانند ویدئو پلیر سایت یوتیوب
  • قابلیت قرار دادن و انتخاب چند کیفیت مختلف برای ویدئوی در حال پخش مانند ویدئو پلیر سایت یوتیوب

اکثر امکاناتی که نوشته شده را من هنوز یاد نگرفته ام و شاید با زدن یک مثال برای هر کدام بتوانید مرا در یادگیری آن کمک کنید و البته منبع خوبی نیز برای یادگیری علاقه مندان می شود.

با سپاس

ویرایش شده توسط Brenton
لینک به ارسال

این دوتا قابلیت بخودی خود روی html5 بعیده که بنشینه یعنی مورد اول که نیاز به یک آرشیو برای استناد داره و در نتیجه کد معرفی آرشیوه که باید نمونه ها را بسازه و موررد دوم هم نیازمند ورژن های مختلف از یک فایل که باید ساخته (کانورت) و ذخیره بشه در مورد مورد اول فکر کنم با jquery بشه ساخت ولی برای دومی احتمالا کدهای پیشرفته تر php نیازه

از یک اسکریپت آماده ویدئو گالری استفاده کنید راحت ترینشه

لینک به ارسال

این دوتا قابلیت بخودی خود روی html5 بعیده که بنشینه یعنی مورد اول که نیاز به یک آرشیو برای استناد داره و در نتیجه کد معرفی آرشیوه که باید نمونه ها را بسازه و موررد دوم هم نیازمند ورژن های مختلف از یک فایل که باید ساخته (کانورت) و ذخیره بشه در مورد مورد اول فکر کنم با jquery بشه ساخت ولی برای دومی احتمالا کدهای پیشرفته تر php نیازه

از یک اسکریپت آماده ویدئو گالری استفاده کنید راحت ترینشه

من این سایتو پیدا کردم که درباره ی این امکانات در HTML5 توضیح میده(Preview Thumbnails on Seek):

HTML5 Video Player Development - Blog.Denivip.ru

ولی نفهمیدم اون کداشو کجا باید بذارم.

جای دیگه هم خوندم که یوتوب Thumbnail ها رو برای هر ویدئو می ساخته و اگر اون زمان بدون فلش پلیر با یک مرورگر که HTML5 رو پشتیبانی میکنه می رفتید یوتیوب می تونستید پلیر جدید یوتیوب رو ببینید.

نمیشه کاری کرد که عکس نخواد بسازه؟ اگه اینجوری باشه که من اگه 100 تا ویدئو بخوام قرار بدم بیشتر از 10000 تا عکس باید ساخته بشه تازه واویلاست اگه چند کیفیتی هم بخوام بذارم.

اسکریپت ویدئو گالری خودش پلیر داره؟

فلش پلیر و یا برنامه جانبی برای پخش نمی خواد؟

لینک به ارسال

اونها کدهای جاوااسکپریت هست و باید در تگ script قرار بگیرن.

میتونید بندانگشتی قرار ندید. اینکه چه قابلتی استفاده بشه دست خود شماست.

برای پخش هم فقط کافیه مرورگر موردنظر از html5 پشتبانی کنه.

لینک به ارسال

اونها کدهای جاوااسکپریت هست و باید در تگ script قرار بگیرن.

میتونید بندانگشتی قرار ندید. اینکه چه قابلتی استفاده بشه دست خود شماست.

برای پخش هم فقط کافیه مرورگر موردنظر از html5 پشتبانی کنه.

سپاس

پس من یه تحقیقی می کنم نتیجه رو اعلام می کنم.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...