কীভাবে Video.js use করবেন আপনার site এ !

Assalamualaikum !
প্রথমে জানতে হবে এটা কি ? এবং এটা দিয়ে কি হয় !

একটি ওপেন-সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি যা ওয়েবসাইটে ভিডিও প্লেব্যাককে সহজ করে তোলে। এটি ডেভেলপারদের জন্য একটি কাস্টমাইজেবল এবং প্রতিক্রিয়াশীল ভিডিও প্লেয়ার তৈরি করার সুযোগ দেয়।

এটির ব্যবহার খুব সহজ ,
ধাপ ১ঃ- <head> ট্যাগ এর ভিতরে <link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" /> add করতে হবে ।

ধাপ২ঃ- <body> এর ঠিক উপরেই <script src="https://vjs.zencdn.net/8.16.1/video.min.js"></script> add করতে হবে !

ব্যাস হয়ে গেল ,
আগের default player :-

video.js add করার পর :-

কিন্তু ঠিক হবহু এমন features চোখে পরছে না ? এখন কিছু মশালাদার জিনিস যোগ করার পালা
আসুন এখন কিছু extra funtion add করি !
ধরি আমাদের কোড টি দেখতে এমনঃ-

আমরা যেটি নিয়ে কাজ করব তার একটা উদাহরণঃ- 
<video  id="my-video"
    class="video-js vjs-matrix video-js2"
    controls
    autoplay
    poster="source" // thumbnail এর path
    preload="auto"
    width = "420"
    height="320"
    
    data-setup="{}">
<source src="${Source}" type="video/mp4">
</video>

এখন controlbar এ skip button and playback speed add করার পালাঃ-
প্রথমে একটি file.js create করুন আর তা <script src="path/file.js"></script> এর মাধ্যমে body tag এর উপর যোগ করুন ।

videojs('#my-video', { //আপনার id এর নাম 
    controlBar: {
      skipButtons: {
        forward: 10,
        backward: 10, // এইটা সেকেন্ডে , 
      }
     },
    playbackRates: [0.5, 1, 1.5, 2], 
    

  });

আর css এড এর জন্য <style> tag এর ভিতরে এগুলি লিখুন


.vjs-matrix .vjs-big-play-button {
    background: rgba(255, 0, 0, 0.931);
}

.vjs-matrix .vjs-volume-level {
    background: hsl(240, 100%, 51%);
}
.vjs-matrix .vjs-play-progress {
    background-color: rgb(0, 0, 0);
    
}
.vjs-matrix .vjs-progress-holder {
    background: rgb(0, 255, 238);
    border-radius: 5px;
}
.vjs-matrix .vjs-load-progress{
 background: red;
}
.vjs-matrix .vjs-slider-bar {
    background-color: brown;
}
.vjs-matrix .vjs-play-control {
  
    background-color: red;
     box-shadow: 0;
     border-radius: 5px;
}
.vjs-matrix .vjs-control-bar {
    background-color: transparent;
    
}

এছাড়া আপনারা চাইলে আলাদা ডিজাইনও যোগ করতে পারবেন ।আরও অসাধারণ জিনিসপত্র এড করতে সময় থাকলে ঘুরে আসতে পারেন videojs !

3 Likes