عنصر Video

          ابن حسام 
            بازدید : 254
          شنبه 02 شهریور 1398
           نظرات (0)
        

عنصر <video> امکان گنجاندن فایل‌های ویدئویی در یک فایل HTML را به روشی کاملاً مشابه درج تصویر در صفحه فراهم ساخته است.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport"content="width=device-width, initial-scale=1.0">
        <title>Video</title>
        <link rel="stylesheet"href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700"rel="stylesheet">
        <link rel="stylesheet"href="css/main.css">
    </head>
    <body>
      <div class="wrapper">
        <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"type="video/mp4s"/>
      </div>
    </body>
</html>

خصوصیات آن شامل موارد زیر هستند:

Src – این خصوصیت نشانگر منبع فایل است که کاملاً مشابه عنصر image عمل می‌کند. در واقع در این خصوصیت لینکی برای ویدیو اضافه می‌کنیم.
Type – این همان جایی است که نوع video/mp4 را تعیین می‌کنیم چون mp4. قالب ویدئویی‌ است که می‌خواهیم استفاده کنیم. می‌توان از فرمت‌های ویدئویی دیگری مانند ogg. یا webm. نیز استفاده کرد که در این صورت مقدار این متغیر به ترتیب به صورت‌های ideo/ogg یا video/WebM تغییر می‌یابد.

دقت کنید که قالب‌های ویدئویی رایج شامل موارد WebM ،Ogg و MP4 هستند.

<video> در صفحه وب تگ video در صفحه وب

این خصوصیت هیچ مقداری نمی‌گیرد، زیرا یک خصوصیت از نوع بولی (boolean) است، یعنی می‌تواند مقدار true یا false داشته باشد.

اینک ما خصوصیت controls را در عنصر ویدئوی خود داریم که مقدار true دارد و کنترل‌های بازپخش ویدئو را نمایش می‌دهد.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport"content="width=device-width, initial-scale=1.0">
        <title>Video</title>
        <link rel="stylesheet"href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700"rel="stylesheet">
        <link rel="stylesheet"href="css/main.css">
    </head>
    <body>
      <div class="wrapper">
        <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"type="video/mp4s"controls/>
      </div>
    </body>
</html>

<video> + Controls

اینک اگر کنترل‌ها را حذف کنیم، می‌توانیم با استفاده از خصوصیت autoplay کاری کنیم که ویدئو به صوت خودکار شروع به پخش کند.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport"content="width=device-width, initial-scale=1.0">
        <title>Video</title>
        <link rel="stylesheet"href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700"rel="stylesheet">
        <link rel="stylesheet"href="css/main.css">
    </head>
    <body>
      <div class="wrapper">
        <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"type="video/mp4s"autoplay/>
      </div>
    </body>
</html>

همان طور که می‌بینید ویدئو خودش شروع به پخش می‌کند و هیچ کنترلی وجود ندارد. با این حال، چون ما پخش ویدئو را آغاز نکرده‌ایم، پس آن را متوقف نیز نمی‌توانیم بکنیم. البته می‌توانیم پخش خودکار و کنترل‌ها را با هم داشته باشیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport"content="width=device-width, initial-scale=1.0">
        <title>Video</title>
        <link rel="stylesheet"href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700"rel="stylesheet">
        <link rel="stylesheet"href="css/main.css">
    </head>
    <body>
      <div class="wrapper">
        <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"type="video/mp4s"autoplay controls/>
      </div>
    </body>
</html>

عنصر <video> با خصوصیت و کنترل‌ها

برای عنصر ویدئو بسته به نیازها، می‌توان خصوصیت‌های مختلفی ارائه کرد. در بخش ابتدایی مقاله اشاره کردیم که دو روش برای افزودن عنصر ویدئو به صفحه وب وجود دارد. در ادامه روش دوم را نیز معرفی می‌کنیم.