Skip to main content

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

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



Clapper :- http://clappr.io/ | GitHub :- https://github.com/clappr/clappr

See Demos :- https://sopplayer.sh20raj.repl.co/Clapper/ | Video Documentation :- https://youtu.be/5qX7yG_7WDs






Firstly Import the Clappr CDN in head tag

<head> 
  
<script src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<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>

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


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>

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

Labels:

Comments

  1. ∅ ÜÑKÑØWNSeptember 19, 2021 at 1:10 AM

    Chats During Video Making...


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

    Let's Start adding this video player
    Let's take a sample video link...
    or play a drive video...
    The Article Link will be in description...

    Let's Play a 360 video...

    See the GIF Poster....


    Get More Detailed Info in Article (Link in Description...)

    Thanks for watching till last...

    /
    /
    /
    /
    /


    ReplyDelete
  2. ∅ ÜÑKÑØWNSeptember 19, 2021 at 1:55 AM

    Video Documentation :- https://youtu.be/5qX7yG_7WDs

    ReplyDelete

Post a Comment

Random Posts