HTML5 Video Player - Clapper - An extensible media player Integration - 360 HTML5 Video Player Support

byAhmed Sharif Khan Noor -
0

 HTML5 Video Player - Clapper - An extensible media player Integration - 360 HTML5 Video Player Support






Firstly Import the Clappr CDN in head tag<head>

<script src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
HTML

<head/>

Then Use the below codes to initialize your video player.

<div id="player"></div>
 <script>
   var player = new Clappr.Player(
     {
     source:"https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4",
     parentId: "#player",
     poster:"https://i.pinimg.com/564x/f3/df/a6/f3dfa67d82133295a97731532fb625b0.jpg"
     });
 </script>
HTML

Here 

  • Source :- Enter your video/Remote Video URL.
  • parentId :- Your Query selector for where you want to show your video player.i.e. we have an element with id="video1" then we have to give the value in Clappr.Player is parentId: "#video1", .
  • Poster (Optional) :- Give your Poster URL. (GIF posters are also supported.)


This Video Player Also Support 360 Videos.



Example Video Link :- http://thiago.me/demo-360/cool.mp4 | Demo :- http://thiago.me/clappr-360/ | GitHub :- https://github.com/thiagopnts/clappr-video360

00:01
 
00:40


Let's Use it...


<script src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clappr-video360@0.1.1/dist/clappr-video360.min.js"></script>
<script>
var p = new Clappr.Player({
    source: 'http://thiago.me/demo-360/cool.mp4',
    plugins: {
        container: [Video360],
    },
    parentId: '#player360',
});
// for better usability, disable clappr's click_to_pause plugin
p.getPlugin('click_to_pause').disable();
</script>
HTML

All the things are same here you just have to enter a 360 Video Link and Use the clappr-video360 Plugin.

Other Ideas :-

  • Play Drive / Archive.org Videos.
  • Create a 360 Video Downloading Website.(Video Hosting on Archive)
  • Others may Come Soon

You may like these posts

Share your thoughts

Previous Post Next Post

نموذج الاتصال