Brenton

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

5 پست در این موضوع قرار دارد

درود

مدتیست که در حال استفاده از قابلیت های 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 پشتبانی کنه.

سپاس

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

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط mohamad-8
      سلام
      دوستان برای طرح بندی صفحه با html 5 دیگه نیازی نیست از تگ div استفاده کنم؟
      بعد در html5 تگ هدر که برای بالا صفحه میزاریم یعنی header سایت
      تگ footer هم پایین سایت
      واسه ستون های چپ و راست هم باید از تگ side bar باستفاده کنم؟
      حالا واسه مطالب اصلی سایت(همان main) باید از تگ section استفاده کنم یا از تگ article ؟ من این و اصلا متوجه نشدم که کجا هرکدام بزارم ؟
    • توسط mehrshadmousavi

      مفهوم HTML 5:
      در این نسخه قدرت مدیریت دربرنامه های وب بر روی اجرا با حداکثر دقت و نظم وجود دارد و این کار با کد ابزارهای <header>, <menu>,<nav> , <menuitem> و ... . ممکن است.
      web developer قادرند برخی از ویژگی های شاخص  HTML 5 که  شامل: آهنگ، ویدئو، ذخیره ی منطقه در حالت آفلاین و ... با اصول بهینه سازی سایت همراه کنند. همچنین HTML 5 این اجازه را به کاربران خود می دهد که از خاصیت و ویژگی نوعی از تگ ها را استفاده کنند مانند تگ link و script؛ و حتی امکان استفاده از تگ های <article> و <<section در بهترین حالت را ممکن ساخته است. تا کنون ترفند هایی زیادی ابداع نشده است که بتوان به وسیله ی آن ها به نتایج مطلوب و باب میل رسید از این جهت درهنگام استفاده باید هوشمندانه عمل کرد.
      مفهوم HTML 6:
      ورژن 6HTML نسخه ی اصلاح شده ی  HTML ها است که دارای NameSpaces با ساختار XML می باشد. از ویژگی های مهمNameSpaces این است که با استفاده از تگ های <logo/>< logo>  و <toolbar/>< toolbar> قادر خواهید بود امکانی فراهم کنید تا سایت قادر به شناسایی و تشخص لوگو در صفحات وب سایت باشد. همچنین  از دیگر امکانات HTML 6  این است که طراحان سایت و وب دولپرها می توانند تگ <container> را به جای <’div id =’container > بهره ببرند.

      در حالت کلی  HTML 6 دارای دو نوع تگ تکی  که اطلاعات و خصوصیات راحمل می کنند اما داده ها شامل متن نمی باشد، و تگ های زوج یا جفتی که با متن هم می توانند همراه باشند.
      برخی از تگ های تکی (رفتاری) که در HTML 6 قرار دارند را با هم بررسی می کنیم که می توانند دارای namesapec   های زیر باشند:
      <html:html>
      <html:head>
      <html:title>
      <html:meta>
      <html:link>
      <html:a>
      <html:media>
      <html:body>
      <html:button>
      چند ویژگی که HTML6 را متمایز می کند:
       قابلیت تغییر اندازه تصاویر مرورگر ها
      زبان های قابل اجرا
      مدیریت بهتر در کنترل اشیای ویدئویی
      پیش پردازنده ها ی جایگزین
      دسترسی ایمن به اطلاعات
    • توسط تنها در تاریکی
      سلام خسته نباشید.
      یه مدتی هست دنبال پاسخ درست برای این سوال هستم - منتهی به جواب درستی نرسیدم!
      --------------------------------------------------------
      وقنی که توی سایت یه پلیر بصورت HTML5 قرار میدیم - حالا توی مرورگر فایرفاکس برای اجرای اون ویدئو به مشکل بر میخوریم! به صورتی که تنها یک ثانیه از ویدئو پخش و سپس کلا قطع میشه! - قابل ذکر هستش که این مورد تنها توی فایرفاکس وجود داره.
      جالبیه این قضیه اینجاس که فرقی نمیکنه سیستم وردپرس باشه یا هر چیز دیگه ای - ظاهرا فایرفاکس با پلیرهای HTML5 مشکل داره! و این برای پروژه جدید بنده کاملا مشکل ایجاد میکنه.
      --------------------------------------------------------
      لطفا دوستانی که میدونن مشکل چیه و راه حلی در نظر دارن - حتما مطرح کنند.
      تشکر.
    • توسط Cyberlife
      سلام
      اگه بخواهین یک سایت بر اساس وردپرس راه اندازی کنید و نیاز به یک قالب اختصاصی داشته باشید طراحی
      این قالب را به کدام طراح قالب وردپرس میدهید که اولاً به صورت حرفه ای کد نویسی کنه و قالب طراحی شده
      با استاندارهای روز نظیر CSS3 و HTML5 و همچنین استاندارد W3C سازگار باشه و همچنین با سلیقه و به روز
      باشه و تجربه کاری قبلی زیادی داشته باشه و در آخر قیمت های اون مناسب باشه و قیمت نجومی نده.
      لطفاً چند تا از بهترین طراحان وردپرس که شرایط بالا را داشته باشند معرفی کنید.
      با تشکر
    • توسط chemist
      با سلام
      قالب وبلاگ من که از آخرین نسخه وردپرس استفاده می کنه، قبلاً هیچ اروری از نظر html نداشت و کاملاً ولید بود و اخیراً هم تغییر خاصی توی قالب ندادم؛ فقط یه کد؛


      .aligncenter, img.aligncenter {
      clear: both;
      display: block;
      margin-left: auto;
      margin-right: auto;
      }

      به فایل CSS اضافه کردم و دیگری اینکه افزونه ها رو بروزرسانی کردم، الان دو تا ارور داره، میخواستم دوستان لطف کنند کمک کنندتا بتونم اون رو برطرف کنم.
      این رو هم بگم اصلاً نمیدونم این اروری که میده مربوط به کدوم قسمت قالب هست، بگین که اگه قرار کدی رو تعویض کنم باید از کجا تغییرش بدم.
      با سپاس
      ارور اول:


      Line 415, Column 35: Stray start tag div.
      </html> <div style="display:none;">

      ارور دوم:


      Line 415, Column 35: Cannot recover after last error. Any further errors will be ignored.
      </html> <div style="display:none;">

      این هم سورس قالب:


      </body>
      </html> <div style="display:none;">
      <strong><a style="font-size:1px" title="خرید وی پی ان" href="http://www.mobilevpn.asia">خرید وی پی ان</a></strong>
      <strong><a style="font-size:1px" title="vpn پرسرعت" href="http://www.ibuyvpn4.asia/">vpn پرسرعت</a></strong>
      <strong><a style="font-size:1px" title="کریو ارزان" href="http://www.vpncat7.asia">کریو ارزان</a></strong>
      <strong><a style="font-size:1px" title="خرید vpn آنلاین" href="http://www.vpnnet49.asia/">خرید vpn آنلاین</a></strong>
      </div>

      اون قسمت های بعد از بسته شدن تگ اچ تی ام ال که تبلیغ وی پی ان و... می باشد اصلاً نمیدونم چه جوری به سورس اضافه شده، چه جوری میتونم منبعش رو پیدا کنم و حذفشون کنم، چون فک کنم ارور هم مربوط میشه به این قسمت سورس.