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
Comments
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...
/
/
/
/
/