برچسب ویدیو HTML 5 آسان است برای اضافه کردن ویدئو به صفحات وب خود. اما در حالی که به نظر می رسد آسان بر روی سطح، بسیاری از چیزهایی که شما باید انجام دهید برای گرفتن ویدئو خود را و در حال اجرا وجود دارد. این آموزش شما را از طریق مراحل برای ایجاد یک صفحه در HTML 5 است که ویدیو را در تمام مرورگرهای مدرن اجرا خواهد کرد.
- میزبانی HTML 5 خود را در مقابل استفاده از یوتیوب
- بررسی سریع پشتیبانی ویدئو در وب
- ایجاد و ویرایش ویدئو شما
- تبدیل ویدیو به Ogg برای فایرفاکس
- تبدیل ویدیو به MP4 برای سافاری
- تبدیل ویدیو به FLV برای اینترنت اکسپلورر
- عنصر ویدیو را به صفحه وب خود اضافه کنید
- اضافه کردن جاوا اسکریپت و فلش پلیر برای دریافت اینترنت اکسپلورر برای کار قسمت 1
- تست به عنوان بسیاری از مرورگرها همانطور که می توانید
01 از 10
میزبانی HTML 5 خود را در مقابل استفاده از یوتیوب
یوتیوب یک سایت عالی است. این باعث می شود که سریع ویدیوهای خود را به صفحات وب بسپارید و با برخی از استثنائات جزئی در اجرای آن فیلم ها کاملا بی نظیر است. اگر یک ویدیو در YouTube ارسال کنید، می توانید نسبتا مطمئن باشید که هر کسی قادر به تماشای آن خواهد بود.
اما با استفاده از یوتیوب برای قراردادن فیلم ها شما دارای معایبی است
اکثر مشکلات یوتیوب به جای مصرف کننده، به جای طرف طراح، موارد زیر است:
- جستجو و جستجو اندک اندک
- قطع کردن سرور
- محتوا (ظاهرا) خودسرانه حذف می شود
- محتوای خیلی بد
اما برخی دلایل وجود دارد که چرا YouTube نیز برای توسعه دهندگان محتوا بد است، از جمله:
- حداکثر حداکثر 10 دقیقه برای ویدیوها (برای حسابهای رایگان)
- عملکرد ضعیف آپلود
- YouTube حق دسترسی نامحدود به ویدئو شما را دریافت می کند
- هر کاربر YouTube حق استفاده نامحدود برای ویدیو خود را به دست می آورد
ویدئو HTML 5 برخی از مزایای بیش از یوتیوب را می دهد
با استفاده از HTML5 برای ویدیو به شما اجازه می دهد تا هر جنبه ای از ویدئو خود را کنترل کنید، از چه کسانی می توانید آن را مشاهده کنید، چه مدت آن، چه محتوایی، جایی که میزبانی شده است و نحوه عملکرد سرور. و ویدیوی HTML 5 به شما امکان می دهد تا ویدیوی خود را به صورت فرمت های مختلفی رمز بگذارید تا مطمئن شوید حداکثر تعداد افراد می توانند آن را مشاهده کنند. مشتریان شما به یک پلاگین نیاز ندارند یا منتظر بمانید تا یوتیوب یک نسخه جدیدتر منتشر کند.
البته، فیلم HTML 5 برخی از معایب را ارائه می دهد
این شامل:
- شما باید ویدیو خود را حداقل در سه کدک مختلف رمزگذاری کنید
- شما باید برخی از جاوا اسکریپت را وارد کنید تا اطمینان حاصل شود که مرورگرهایی که HTML 5 را پشتیبانی نمی کنند کار خواهند کرد
- سرور شما باید بتواند نیازهای پهنای باند فیلم های میزبانی را مدیریت کند
02 از 10
بررسی سریع پشتیبانی ویدئو در وب
اضافه کردن ویدئو به صفحات وب به مدت طولانی یک روند دشوار است. چیزهای زیادی وجود داشت که می توانست نادرست باشد:
- ابتدا از تگ
- بنابراین شما به تگ
- سپس شما فکر می کنید " فلش !" و ویدئو خود را به عنوان یک فایل FLV رمزگذاری کنید. اما فلش در بسیاری از دستگاه های تلفن همراه پشتیبانی نمی شود و بسیاری از مردم از هر نوع فلش از فلش متنفرند (25٪ از پاسخ دهندگان من در مورد اینکه چگونه در مورد فلش احساس می کنید نمی توانند فلش را به هر نحوی بچرخانند).
- بنابراین شما تصمیم می گیرید ویدیو خود را به یک سایت جاسازی ویدیو مانند یوتیوب آپلود کنید، اما بعد از آن، مسائل مربوط به یوتیوب که ما در مورد آن بحث کردیم، دارید.
- در نهایت، شما تصمیم به رفتن با HTML 5، اما اینترنت اکسپلورر آن را پشتیبانی نمی کند (تا زمانی که اینترنت اکسپلورر 9). و حتی اگر شما انجام دهید، دو استانداردهای کدک ویدئویی وجود دارد که پشتیبانی می شوند و تنها یک مرورگر است که می تواند از هر دو استفاده کند. پشتیبانی مرورگر برای کدک های ویدئویی و کانتینرها
پس چه کاری باید انجام دهید؟ ازدواج کردن در ویدیو دیگر گزینه ای برای اکثر سایت ها نیست، زیرا این ویدیو بیشتر و بیشتر مهم است. و بسیاری از سایت ها با موفقیت به ویدیو تبدیل شده اند.
صفحات زیر این مقاله شما را از طریق چگونگی اضافه کردن ویدئو به صفحات وب خود که در فایرفاکس 3.5، اپرا 10.5، کروم 3.0، سافاری 3 و 4، آیفون و اندروید، فلش و اینترنت اکسپلورر 7 و 8 کار می کنند، راهنمایی می کند. همچنین کلید هایی را که نیاز دارید برای پشتیبانی از سایر مرورگرهای قدیمی در صورت لزوم اضافه کنید.
03 از 10
ایجاد و ویرایش ویدئو شما
اولین چیزی که شما نیاز دارید هنگام قرار دادن ویدیو در یک صفحه وب، ویدیو واقعی است. شما می توانید به طور مداوم شلیک کنید و پس از آن برای ایجاد یک ویژگی ویرایش کنید، یا شما می توانید آن را اسکن کرده و پیش از آن برنامه ریزی کنید. در هر صورت به خوبی کار می کند، فقط آنچه که با آن راحت هستید. اگر شما نمیدانید که چه نوع ویدیویی دارید، این ایدهها را از راهنمای فیلم دسکتاپ بررسی کنید:
- پروژه های فیلم خانوادگی
- بازاریابی و فیلم های تبلیغاتی
- تورهای مجازی ویدئو
- چگونه به فیلم ها
- فیلم های عروسی
یاد بگیرید چگونه ضبط ویدئو با کیفیت بالا
اطمینان حاصل کنید که شما می دانید که چگونه برای ضبط داخل و خارج از منزل و همچنین نحوه ضبط صدا. نورپردازی نیز بسیار مهم است - عکسهایی که بیش از حد روشن به چشم آسیب می رساند، و بیش از حد تاریک فقط گلدان و غیر حرفه ای نگاه کنید. حتی اگر شما فقط قصد دارید یک ویدیوی 30 ثانیه ای در سایت خود داشته باشید، کیفیت بالاتر آن بهتر است که در وب سایت شما منعکس شود.
همچنین به یاد داشته باشید که حق نسخهبرداری برای هر صدایی یا موسیقی (و همچنین فیلم سهام) اعمال میشود که ممکن است بخواهید از ویدیو استفاده کنید. اگر به دوستانی که می توانید یک آهنگ را برای شما بنویسید و به آنها دسترسی داشته باشید، دسترسی ندارید، باید موسیقی بدون حق امتیاز را در پسزمینه پیدا کنید. همچنین مکان هایی وجود دارد که شما می توانید فیلم های سهام برای اضافه کردن به فیلم های خود را.
ویرایش ویدیوی شما
مهم نیست که چه نرم افزار ویرایش شما استفاده می کنید، فقط تا زمانی که با آن آشنا هستید و می توانید از آن به طور موثر استفاده کنید. Gretchen، راهنمای فیلم دسکتاپ، دارای برخی از نکات ویرایش حرفه ای ویدئو است که می تواند به شما کمک کند فیلم های خود را ویرایش کنید تا عالی شنیده شوند.
ذخیره ویدئو خود را به MOV یا AVI (یا MPG، CD، DV)
برای بقیه این آموزش، فرض می کنیم که ویدیوی شما در نوع خاصی از فرمت با کیفیت بالا (غیر فشرده) ذخیره شده است مانند AVI یا MOV. در حالی که شما می توانید از این فایل ها به عنوان آنها استفاده کنید، شما با تمام مشکلات مربوط به ویدئو که قبلا مورد بحث بوده اید را اجرا می کنید. صفحات زیر توضیح می دهند چگونه فایل خود را به سه نوع تبدیل کنید تا بتوان آن را با بیشترین تعداد مرورگر مشاهده کرد.
04 از 10
تبدیل ویدیو به Ogg برای فایرفاکس
اولین فرمت ما تبدیل به Ogg (گاه به نام Ogg-Theora) است. این فرمت است که فایرفاکس 3.5، اپرا 10.5 و کروم 3 همه می توانند مشاهده کنند.
متاسفانه، در حالی که Ogg دارای پشتیبانی مرورگر است، بسیاری از برنامه های ویدئویی شناخته شده که می توانید خریداری کنید (Adobe Media Encoder، QuickTime و غیره) یک گزینه تبدیل Ogg را ارائه نمی دهند. بنابراین تنها راه تبدیل ویدئو شما به Ogg این است که یک برنامه تبدیل را در وب پیدا کنید.
گزینه های تبدیل
یک ابزار آنلاین به نام Media-Convert وجود دارد که ادعا می کند فرمت های مختلف ویدیوی (و صوتی) را به فرمت های ویدیویی دیگر (و صوتی) تبدیل می کند. هنگامی که ما آن را با یک ویدیو آزمایشی 3 ثانیه امتحان کردیم، نمیتوانستیم آن را روی Mac اجرا کنیم. اما شما ممکن است موفق باشید. این سایت به نفع آزاد بودن است.
برخی از ابزارهای دیگر ما عبارتند از:
- Miro Video Converter (ویندوز مکینتاش) - این برنامه به نفع تبدیل به هر دو Ogg و MP4 (H.264) و منبع باز است.
- Koyote Video Converter (ویندوز)
- تبدیل رایگان ویدئو ما فکر می کنیم که این نسخه ویندوز و نسخه مکینتاش است، اما از سایت خود دشوار است
- Simple Theora Encoder (مکینتاش) - این یکی است که ما تمایل به استفاده از آن.
هنگامی که ویدیوی خود را در فرمت Ogg ذخیره کرده اید، آن را به یک مکان در وب سایت خود ذخیره کنید و به صفحه بعدی بروید تا آن را به سایر فرمت های دیگر برای مرورگر تبدیل کنید.
05 از 10
تبدیل ویدیو به MP4 برای سافاری
فرمت بعدی که شما باید ویدیو خود را تبدیل به MP4 (H.264 ویدیو) است، به طوری که می توان آن را در Safari 3 و 4 و iPhone و Android بازی. به علاوه، فیلم های H.264 به راحتی می توانید به فایل های FLV برای تماشای فلش تبدیل شوند.
این فرمت به راحتی در محصولات تجاری موجود است و شما احتمالا قبلا برنامه ای دارید که اگر شما یک ویرایشگر ویدئویی داشته باشید تبدیل به MP4 می شود. اگر شما دارای Adobe Premiere هستید می توانید از Encoder Adobe Video استفاده کنید یا اگر QuickTime Pro دارید که کار خواهد کرد. بسیاری از مبدل هایی که ما در مورد آن در صفحه قبلی بحث کرده ایم، ویدیو ها را به MP4 تبدیل می کنیم.
- Media Convert - یک ابزار آنلاین است
- Miro Video Converter (ویندوز مکینتاش) - این برنامه به نفع تبدیل به هر دو Ogg و MP4 (H.264) و منبع باز است.
- SUPER (ویندوز) - بسیاری از انواع فایل های مختلف را به MP4 و FLV تبدیل می کند
- تبدیل رایگان ویدئو ما فکر می کنیم که این نسخه ویندوز و نسخه مکینتاش است، اما از سایت خود دشوار است
فایل MP4 خود را به وب سایت خود ذخیره کنید و سپس باید آن را به فلش برای اینترنت اکسپلورر برای استفاده تبدیل کنید.
06 از 10
تبدیل ویدیو به FLV برای اینترنت اکسپلورر
ساده ترین راه برای تبدیل ویدیوها به FLV این است که از خود فلش استفاده کنید. این چگونگی تبدیل ویدیوهای من به فلش است. اما اگر شما فلش ندارید، دو ابزار محبوب برای تبدیل فایل ها به FLV وجود دارد:
- SUPER (ویندوز) - بسیاری از انواع فایل های مختلف را به MP4 و FLV تبدیل می کند
- ffmpegX (مکینتاش) - انواع فایل های مختلف را به Mp4 و FLV تبدیل می کند.
فایل FLV خود را در وب سایت خود ذخیره کنید و صفحه بعدی به شما نحوه نوشتن HTML را نشان می دهد تا بتوانید فیلم های خود را بازیابی کنید.
07 از 10
عنصر ویدیو را به صفحه وب خود اضافه کنید
HTML 5 برای افزودن ویدیو به صفحات وب بسیار آسان است. اکثر مرورگرهای مدرن از ویدیو HTML 5 پشتیبانی می کنند، اگرچه همه آنها از همان روش پشتیبانی نمی کنند. اما این به این معنی است که اگر شما ویدئو خود را به عنوان فرمت Ogg و MP4 ذخیره کنید، قادر خواهید بود فقط چهار یا پنج خط HTML را برای نمایش آن در اکثر مرورگرهای مدرن (به جز Internet Explorer 8) بنویسید. در اینجا این است که چگونه:
- HTML 5 نشانگر doctype را بنویسید تا مرورگرها انتظار داشته باشند HTML 5:
- صفحه وب خود را به طور معمول ایجاد کنید:
title>
head>
body>
html> - در داخل بدن، برچسب
- تصمیم بگیرید که ویژگیهای مورد نظرتان را دارید:
- خودکار پخش - به محض بارگیری آن شروع می شود
- کنترل - اجازه خوانندگان خود را برای کنترل ویدیو (مکث، عقب، سریع به جلو)
- حلقه - هنگام شروع فیلم از ابتدا شروع کنید
- پیش بارگذاری - قبل از دانلود ویدیو به طوری که آن سریع تر آماده می شود زمانی که مشتری بر روی آن کلیک کنید
- پوستر - تصویری را که می خواهید استفاده کنید هنگامی که ویدیو متوقف می شود تعریف کنید
<کنترل های ویدئویی پیش بارگذاری video>
- سپس فایلهای منبع را برای دو نسخه ویدیوی خود (MP4 و OGG) داخل عنصر
اضافه کنید: <کنترل های ویدئویی پیش بارگذاری>
- صفحه را در کروم 1، فایرفاکس 3.5، اپرا 10، و / یا سافاری 4 باز کنید و مطمئن شوید که آن درست نمایش داده می شود. شما باید حداقل در Firefox 3.5 و Safari 4 آن را امتحان کنید زیرا هر کدام از کدک های مختلف استفاده می کنند.
خودشه. هنگامی که شما این کد را در جای خود قرار داده اید، یک ویدیو دارید که در فایرفاکس 3.5، سافاری 4، اپرا 10 و کروم 1 کار می کند. اما درباره اینترنت اکسپلورر چیست؟
اینترنت اکسپلورر HTML 5 یا برچسب را دوست ندارد
در بخش بعدی، ما در مورد آنچه شما می توانید انجام دهید برای به دست آوردن IE 8 به خوبی با برچسب های ویدیو HTML 5 شما و نمایش یک ویدیو صحبت کنید. شما باید از فلش استفاده کنید. خبر خوب این است که انتظار می رود IE 9 از HTML5 و برچسب ویدئو پشتیبانی کند.
08 از 10
افزودن جاوا اسکریپت و فلش پلیر برای دریافت اینترنت اکسپلورر برای کار
ممکن است متوجه شده باشید که در صفحه HTML قبلی، خط منبع برای فایل FLV وجود نداشت. و اگر شما آن صفحه را در اینترنت اکسپلورر آزمایش کردید، کار نمی کند. به این دلیل که اینترنت اکسپلورر HTML 5 را تشخیص نمیدهد و نمیتوان بطور بومی از ویدیوهای OGG یا MP4 بازی کرد. برای اینکه اینترنت اکسپلورر 7 و 8 کار کند، شما باید آن را به عنوان فلش بازی کنید. اما گام های بیشتری برای به کار گرفتن آن از اضافه کردن فایل FLV وجود دارد.
مرحله 1: یک پخش کننده فلش Flash برای وب سایت شما دریافت کنید
توصیه می کنیم از FlowPlayer استفاده کنید، زیرا این یک پخش کننده ویدیویی فلش ویدئویی است که می توانید در سرور وب خود نصب کنید و از هر لحظه از فیلم فلش برای پخش استفاده کنید. نسخه رایگان FlowPlayer تبلیغات را به فیلم های خود اضافه می کند، اما شما همچنین می توانید مجوزهای تجاری را در صورت نیاز به آنها خریداری کنید.
دستورالعمل های سایت FlowPlayer را برای نصب FlowPlayer در وب سایت خود دنبال کنید. به طور خلاصه، شما 2 فایل SWF و یک فایل جاوا اسکریپت را در سایت خود نصب خواهید کرد. در انتهای HTML خود (قبل از برچسب body>) یک خط اضافه کنید: