کار با فایل های ویدیویی در HTML5

کار با فایل های ویدیویی

قبل از معرفی HTML5 هر ویدیویی با هر فرمتی که بود باید با استفاده از پلاگین های خارجی به نمایش در می آمد (مانند flash) اما در HTML5 عنصری به نام <video> معرفی شد که راهی برای جایگذاری استاندارد ویدیو در صفحه ی وب است. از نظر پشتیبانی مرورگر ها از این ویژگی می توان گفت:

مرورگر chrome: از نسخه ی 4 به بعد پشتیبانی می شود.
مرورگر IE/Edge: از نسخه ی 9 به بعد پشتیبانی می شود.
مرورگر FireFox: از نسخه ی 3.5 به بعد پشتیبانی می شود.
مرورگر Safari: از نسخه ی 4 به بعد پشتیبانی می شود.
مرورگر Opera: از نسخه ی 10.5 به بعد پشتیبانی می شود.

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<video width="620" height="540" controls>
  <source src="https://www.roxo.ir/backend/api/video?uid=2183&nval=$2y$10$q3H6FMbznNnb56MJwEyHSuWGrvCkrRsDu3lMSycIxiNoDFLKH3DLC&ts=1556875262" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  مرورگر شما از این ویدیو پشتیبانی نمی کند.
</video>

</body>
</html>

مشاهده ی خروجی در JSBin

توضیح این مثال:

controls به کاربر دکمه های کنترل پخش را می دهد (مانند pause و next و تنظیم صدا و ...). بهتر است همیشه width و height را تعیین کنیم تا صفحات وب در هنگام بارگذاری به هم نریزند. عنصر <source> نیز به شما اجازه می دهد تا به جای یک فایل چندین فایل ویدیویی را تنظیم کنید تا اگر فایل اول قابلیت پخش در مرورگر کاربر را نداشت فایل بعدی پخش شود و الی آخر. در آخر متن عادی که در بین تگ های <video> و <video/> نوشته ایم تنها زمانی نمایش داده می شوند که مرورگر کاربر از عنصر <video> اصلا پشتیبانی نکند.

یکی دیگر از Attribute هایی که میبینید، قابلیت autoplay یا همان پخش خودکار ویدیو است. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" autoplay>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<p><b>هشدار:</b> این قابلیت بر روی برخی از تلفن های همراه کار نمی کند</p>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: قابلیت پخش خودکار در برخی از تلفن های همراه و iPad یا iPhone به خوبی کار نمی کند.

میدانیم که HTML5 از سه فرمت ویدیویی پشتیبانی می کند: MP4 و WebM و Ogg. توزیع این سه فرمت در مرورگر های مختلف به این شکل است:

مرورگر	MP4	WebM	Ogg
Internet Explorer	پشتیبانی می شود	پشتیبانی نمی شود	پشتیبانی نمی شود
Chrome	پشتیبانی می شود	پشتیبانی می شود	پشتیبانی می شود
Firefox	پشتیبانی می شود	پشتیبانی می شود	پشتیبانی می شود
Safari	پشتیبانی می شود	پشتیبانی نمی شود	پشتیبانی نمی شود
Opera	پشتیبانی می شود (از نسخه ی 25 به بعد)	پشتیبانی می شود	پشتیبانی می شود

جاوا اسکریپت و ویدیو

HTML5 برای عنصر <video> انواع متد های DOM و خصوصیات و رویدادها را تعریف می کند بنابراین می توانیم انواع عملیات های مختلف مانند پخش، توقف، تنظیم صدا، تنظیم مدت ویدیو و ... را روی ویدیوی مورد نظر انجام دهیم. همچنین با استفاده از رویدادها می توانیم زمان شروع به پخش یک ویدیو را مشخص کنیم (مثلا صدای خاصی پخش کنیم) و ... .

به مثال زیر توجه کنید:

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br><br>
  <video id="video1" width="420">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div> 

<script> 
var myVideo = document.getElementById("video1"); 

function playPause() { 
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
} 

function makeBig() { 
    myVideo.width = 560; 
} 

function makeSmall() { 
    myVideo.width = 320; 
} 

function makeNormal() { 
    myVideo.width = 420; 
} 
</script> 

<p dir='rtl'>منبع ویدیو: <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

</body> 
</html>

مشاهده ی خروجی در JSBin

کمی خلاق تر

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

به کدهای زیر توجه کنید:

مثال اول

کد HTML:

<div class="main-banner">
  <div class="background-image"></div>
  <!-- Empty div to place video in -->
  <div class="background-video" 
    data-mp4="https://a0.muscache.com/airbnb/static/Croatia-P1-1.mp4" 
    data-webm="https://a0.muscache.com/airbnb/static/Croatia-P1-0.webm">
  </div>
  
  <div class="content">
    <h1>Lorem Ipsum</h1>
    <button class="pause-button hidden">Pause</button>
  </div>
</div>

<!-- Load a large image to test video loading -->
<div class="image-wrapper">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg" alt="" />
</div>

کد های CSS:

.main-banner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 600px;
  margin: 0 auto;
  overflow: hidden;
}
.main-banner .content {
  position: relative;
  top: 50%;
  transform: translatey(-50%);
  color: white;
  text-align: center;
}

.background-image,
.video {
  width: 100%;
  position: absolute;
  z-index: -1;
}

.background-image {
  top: 0;
  left: 0;
  height: 100%;
  background-image: url("https://a2.muscache.com/airbnb/static/landing_pages/pretzel/stills/croatia-887a17b9994536f0d95bfd3f43ed664c.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
}

.video {
  height: auto;
}

.image-wrapper img {
  height: 0;
  width: 0;
}

.hidden {
  display: none;
}

کد های جاوا اسکریپت با تکیه بر jQuery:

// add video tag after the page has finished loading
$(window).on("load", function() {    
  var vidContainer = $('.background-video'),
      src1 = vidContainer.attr('data-mp4'),  
      src2 = vidContainer.attr('data-webm'),
      video = '<video class="video" autoplay loop="loop"><source src="' + src1 + '" type="video/mp4"><source src="' + src2 + '" type="video/webm"></video>';

  vidContainer.replaceWith(video);
  $('.pause-button').removeClass('hidden');
}); 

$('.pause-button').click(function() {
  $('.video').get(0).paused ? $('.video').get(0).play() : $('.video').get(0).pause();
});

مشاهده ی خروجی از ترکیب این سه کد

پس از آنکه وارد صفحه ی خروجی شدید، چند لحظه صبر کنید تا ویدیو بارگذاری شود. حالا می بینید که ما از یک ویدیو به عنوان پس زمینه ی سایت خود استفاده کرده ایم!

مثال دوم، کدهای HTML:

<div class="container" id="container">
  <video loop autoplay class="video-background" id="video-background">
    <source src="https://static.videezy.com/system/resources/previews/000/002/313/original/electric-bulb-hd-stock-video.mp4" />
    
    <img src="placeholder.jpg" alt="placeholder" />
  </video>
  <div class="overlay">
    <div class="title">
      <h1>Electric Bulb</h1>
    </div>
  </div>
</div>

کدهای CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.container .video-background,
.container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.container .overlay {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 255, 0.3), transparent);
  background-size: 100% 5px;
}
.container .title {
  font-size: 1.25em;
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 100%;
  width: 15em;
  height: 15em;
  color: #FFF;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  top: calc(50% - 7.5em);
  left: calc(50% - 7.5em);
  display: table;
}
.container .title h1 {
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 2px;
  mix-blend-mode: overlay;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

کد های جاوا اسکریپت:

// video source https://www.videezy.com/random-objects/2313-electric-bulb-hd-stock-video

var container = document.getElementById('container');
var video = document.getElementById('video-background');


// Resize
function adapt() {
  var container_width = container.offsetWidth;
  var container_height = container.offsetHeight;
  
  video.style.height = "auto";
  video.style.width = container_width + "px";
  
  if(video.offsetHeight < container_height) {
    video.style.height = container_height + "px";
    video.style.width = "auto";
  }
  
  video.style.top = (((video.offsetHeight - container_height) / 2 ) * -1) + 'px';
  video.style.left = (((video.offsetWidth - container_width) / 2 ) * -1) + 'px';
}

// events
window.addEventListener('load', adapt);
window.addEventListener('resize', adapt);

مشاهده ی خروجی پس از ترکیب سه دسته کد بالا

مثال سوم: ما حتی می توانیم ویدیو را در قالب یک عنصر دیگر mask کنیم تا فقط درون آن نمایش داده شود. به مثال زیر دقت کنید.

کد های HTML:

<iframe id="sventeaser" src="http://svencreations.com/demo/easter-codepen.html" style="position: absolute; top: 0; left: 0; border: 0; z-index: 10; width: 100%; height: 100%">
  <p>Your browser does not support iframes.</p>
</iframe>

<div id="dummy-image" class="codepen-preview abs-fs" style="display: none">
 
</div>

<a id="secure-button" href="https://goo.gl/gJohxP" target="_blank" style="display: none"><span>VIEW GREETING</span></a>

کد های CSS:

@import url(https://fonts.googleapis.com/css?family=Squada+One);
body,
html {
  height: 100%;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
  background: none black;
}

.abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%); /* IE 9 */
    -webkit-transform: translate(-50%,-50%); /* Safari */
    -moz-transform: translate(-50%,-50%); /* Firefox Older versions*/
    -o-transform: translate(-50%,-50%); /* Opera */
    transform: translate(-50%,-50%);
}

.abs-fs {
    background: url("http://svencreations.com/demo/images/easter-preview.jpg") no-repeat center center transparent;
  background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.codepen-preview h1 {
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-weight: normal;
  font-size: 24px;
}

body.secure {
  background-image: url(https://source.unsplash.com/43o1KVbOWXA/1600x900);
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body.secure:after {
  content: '';
  background: rgba(52, 69, 87, 0.85);
}

a {
  display: block;
  width: 220px;
  height: 70px;
  z-index: 1000;
}
a:after {
  content: '';
  background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
  background-size: 400% 400%;
  -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  -moz-animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
  -webkit-animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
  animation: gradient 3s ease-in-out infinite, border 1s forwards ease-in-out reverse;
}
a > span {
  display: block;
  background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-animation: gradient 3s ease-in-out infinite;
  -webkit-animation: gradient 3s ease-in-out infinite;
  animation: gradient 3s ease-in-out infinite;
}

/* helpers */
.absolute-centering, body:after, a, a:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.text-formatting, a {
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  letter-spacing: 2px;
  line-height: 70px;
  font-family: 'Squada One', cursive;
  font-size: 28px;
}

/* motion */
@-moz-keyframes gradient {
  0% {
    background-position: 14% 0%;
  }
  50% {
    background-position: 87% 100%;
  }
  100% {
    background-position: 14% 0%;
  }
}
@-webkit-keyframes gradient {
  0% {
    background-position: 14% 0%;
  }
  50% {
    background-position: 87% 100%;
  }
  100% {
    background-position: 14% 0%;
  }
}
@keyframes gradient {
  0% {
    background-position: 14% 0%;
  }
  50% {
    background-position: 87% 100%;
  }
  100% {
    background-position: 14% 0%;
  }
}
@-moz-keyframes border {
  0% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
  }
  75% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
  }
  100% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
  }
}
@-webkit-keyframes border {
  0% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
  }
  75% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
  }
  100% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
  }
}
@keyframes border {
  0% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
  }
  75% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
  }
  100% {
    -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
  }
}

کد های جاوا اسکریپت:

function isSecure()
{
   return window.location.protocol == 'https:';
}

function remove(){
 var frame = document.getElementById("sventeaser");
 frame.parentNode.removeChild(frame);
}

if(isSecure()) {
  document.body.className += ' ' + 'secure';

  document.getElementById("secure-button").style.display = "block";
  document.getElementById("dummy-image").style.display = "none";
  remove();
} else {
  document.getElementById("dummy-image").style.display = "block";
   document.getElementById("secure-button").style.display = "none";
}

مشاهده ی خروجی پس از ترکیب سه کد بالا

راه های استفاده از ویدیو ها مانند دیگر عناصر HTML بسیار زیاد است و به شما و خلاقیتتان بستگی دارد که چطور از آن ها استفاده کنید. امیدوارم از این قسمت لذت برده باشید.