قرار دادن ویدئو توسط زبان HTML5 بسیار ساده و راحت میباشد. حتی میتوانیم ساده بودنش را مانند قرار دادن تصاویر در طراحی وب سایت هم مقایسه نماییم. در این مقاله سعی داریم قرار دادن ویدئو در مرورگرهایی که از این قابلیت پسشتیبانی مینمایند را معرفی و آموزش دهیم.
تنها کاری که باید انجام دهید قرار دادن تگی به نام <video> در صفحه وب سایت میباشد. البته ویدئو ها در HTML5 و استفاده نمودن آن در طراحی سایت میتواند در سئو وب سایت شما نیز تاثیر بسیار زیادی هم داشته باشد. این مقاله بر روی همین مورد هم نیز تمرکز دارد.
پیش نیازها
باید از کروم و سافاری و مرورگر IE9+ استفاده شود. در زمانی که این مقاله نوشته میشود مرورگرهای Firefox و Opera تا حدی در پشتیبانی نمودن ویدئوها مشکل دارند. همچنین از فرمت تصویری .mp4 هم میتوانید برای ویدئوهای خود استفاده نمایید.
<!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>
ساختن صفحه وب برای وارد نمودن ویدئو
کدی که در پایین تصویرش را به شما نشان میدهیم یک صفحه وب سایت میباشد که میتوانیم ویدئویی را در داخل آن وارد نماییم.
