آموزش طراحی سایت – چگونگی قرار دادن ویدئو حرفه ای
در این آموزش طراحی سایت شما قرار دادن ویدئو به صورت حرفه ای را یاد میگیرید. یکی از مباحث آموزش طراحی سایت قرار دادن ویدئو می باشد.
در آموزش طراحی سایت یکی از موارد قرار دادن ویدئو است. قرار دادن ویدئو بین کدها خیلی آسان است و هیچ گونه پیچیدگی ندارد. اما نمی دانیم که چرا هنوز خیلی ها در قرار دادن ویدئو ضعف دارند و به طرز فاجعه باری آن را در سایت قرار می دهند. متاسفانه دیدی که برروی طراحی سایت وجود دارد، اصلا جالب نیست. اکثر مردم فکر می کنند که طراحی سایت کار آسانی است و فقط قراردهی تگ می باشد. اگر اینطور بود که الان همه باید طراح حرفه ای سایت می باشند اما این تصور غلط است. برای همین است که هنوز خیلی ها با این تجربه زیادی دارند، اما در استفاده از تگ همانطور که گفتیم مشکل دارند. یکی از این تگ ها، تگ ویدئو است. همانطور که می دانید تگ ویدئو به صورت <video> نوشته می شود.
یکی از نکاتی که اکثر طراحان سایت رعایت نمی کنند، تطابق پذیری آن با انواع مرورگرها می باشد. در آموزش طراحی سایت خیلی مهم است که کدهایی که می نویسید، در تمامی مرورگرها به درستی و به یک شکل نشان داده شود. برای همین توصیه می شود که قبل از استفاه تطابق پذیری آن با مرورگرها را بررسی کنید، مخصوصا که از ورژن جدید HTML5 استفاده می کنید.
ما در این مقاله آموزشی طراحی سایت، می خواهیم برای یکبار و همیشه قرار دادن ویدئو به صورت درست و اصولی یاد بگیریم.
قراردادن ویدئو در طراحی سایت
خب اول از همه باید قابی را که می خواهید ویدئو در آن نمایش داده شود، ایجاد کنید. ابتدا یک صفحه ایجاد می کنید و نام آن را برای مثال index.html قرار می دهید. سپس دستورات زیر را می نویسید تا اول یک قاب ایجاد کنید.
<!DOCTYPE html>
<html>
<head>
<"meta charset="utf-8>
<title>HTML5 Video Player</title>
<style>
{body
;font-family: sans-serif
;border: 0
;margin: 0
;padding: 0
{
}header
;text-align: center
{
}player #
;display: table
;width: 100%
;padding: 4px
{
}player > div #
;display: table-cell
;vertical-align: top
{
<style/>
<head/>
<body>
<header>
<h1>HTML5 Video Player</h1>
<header/>
<"section id="player>
<div>
<!-- The video will appear here-->
<div/>
<section/>
<body/>
<html/>
حال داخل div، کد تعریف ویدئو را قرار می دهیم. البته ما در این مطلب آموزش طراحی سایت فقط عکسی از نتیجه کار را نشان داده ایم. اگر می خواهید که فیلم شما در تمامی مرورگرها نشان داده شود، بهتر است که از فرمت MP4 استفاده کنید، ولی باز توصیه میکنیم که تطابق پذیری با انواع مرورگرها را حتما مطالعه کنید. بهترین منبع هم می تواند سایت w3schools باشد.
کد تگ ویدئو به صورت زیر است:
"video src="[ YOUR VIDEO ].mp4>
controls
<"width="720" height="480
Your browser does not support the video element
<video/>
در قسمت src شما آدرس سایت را قرار می دهید که با فرمت mp4 می باشد. اگر قصد دارید که کاربر با کلیک روی دکمه play ، ویدئو خود را اجرا کند از ویژگی controls استفاه کنید و اگر می خواهید با ورود به صفحه، ویدئو به صورت خودکار اجرا شود از ویژگی autoplay استفاده کنید.
کل آموزش قرار دادن فیلم در طراحی سایت همین است. خیلی ساده و جامع بود. یکبار برای همیشه این آموزش را یاد بگیرید و آن را استفاده کنید.