By Prem Tiwari in Freebies, JavaScript, Web Technologies. Updated on
In this article we’ll showcase you the best Responsive Video Player with Vertical Playlist to test and adapt for your next projects. A responsive video player on your webpage assures all your users can enjoy an outstanding viewing experience. You can also put the multiple video files you would like to showcase.
1) Responsive design – compatible with all portable devices and screen sizes
2) Set video playlist height
3) Edit CSS files
4) Featured control bar includes: Auto-hide, Previous and Next buttons, Play/Pause button, Full-screen button, volume slider and track’s time control.
5) Touch support
6) Embed into HTML page, CMS sites or social networks
7) Supports all popular video formats
8) Compatible with all major browsers
1 2 3 | <script type="text/javascript" src="https://freewebmentor.com/demo/video-player/js/jquery.min.js"></script> <script type="text/javascript" src="https://freewebmentor.com/demo/video-player/js/BrightcoveExperiences.js"></script> <link rel="stylesheet" type="text/css" href="https://freewebmentor.com/demo/video-player/css/videoPlaylist.css" /> |
HTML Layout
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div id="wrapper"> <h1>Responsive Chromeless Player with Vertical Playlist</h1> <div class="player-container"> <object id="myExperience" class="BrightcoveExperience"> <param name="bgcolor" value="#FFFFFF" /> <param name="width" value="480" /> <param name="height" value="270" /> <param name="playerID" value="2437985438001" /> <param name="playerKey" value="AQ~~,AAABVI-29ck~,ZKIkeB3ohDm-IBkv0-n2eiqII_nJ18lm" /> <param name="isVid" value="true" /> <param name="isUI" value="true" /> <param name="dynamicStreaming" value="true" /> <param name="@videoPlayer" value="3117701222001" /> <param name="includeAPI" value="true" /> <param name="templateLoadHandler" value="BC.onTemplateLoaded" /> <param name="templateReadyHandler" value="BC.onTemplateReady" /> </object> <!-- Container that will hold playlist --> <div class="playlist"></div> </div> |
Use JavaScript Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | var BC = { onTemplateLoaded: function (exID) { // get reference to the player object BC.player = brightcove.api.getExperience(exID); // get reference to the expeirence module BC.experienceModule = BC.player.getModule(brightcove.api.modules.APIModules.EXPERIENCE); // get reference to the content module BC.contentModule = BC.player.getModule(brightcove.api.modules.APIModules.CONTENT); // get reference to the video player module BC.videoPlayer = BC.player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER); }, onTemplateReady: function (evt) { // fetch the playlist. Note this method is asynchronous so callback fuction is required BC.contentModule.getPlaylistByID("1745523063001", function (data) { // playlist ID we're getting data for BC.buildPlaylist(data); }); }, buildPlaylist: function (data) { // loop through array of video objects in the playlist for (var i = 0; i < data.videos.length; i++) { var playlistItem = '<div class="playlist-item" data-videoid="' + data.videos[i].id + '"><div class="playlist-item-thumbnail">' + ' <img src="' + data.videos[i].thumbnailURL + '" alt="' + data.videos[i].displayName + '" /></div>' + '<div class="playlist-item-description"><h3>' + data.videos[i].displayName + '</h3>' + '<p>' + data.videos[i].shortDescription + '</p></div></div>' $('.playlist').append(playlistItem); } BC.resizePlayer(); BC.playPlaylistItem(); }, playPlaylistItem: function () { $('.playlist-item').click(function () { $('.playlist-item').removeClass('playlist-item-selected'); var videoId = $(this).data('videoid'); BC.videoPlayer.loadVideoByID(videoId); $(this).addClass('playlist-item-selected'); }); }, resizePlayer: function () { var playlistItem = $('.playlist-item'), itemDescription = $('.playlist-item-description'), newWidth = (playlistItem.width() - 96); // resize width of description container dynamically itemDescription.css({ width: newWidth + "px" }) if (BC.experienceModule) { BC.experienceModule.setSize($('#myExperience').width(), $('#myExperience').height()); } } }; // resize the player on viewport size change $(window).on('resize', function () { BC.resizePlayer(); }); |
Sharing is caring!
Tags: CSS, free html5 video player with playlist, html5 video player playlist, html5 video player with playlist, html5 video playlist, html5 video responsive, responsive html5 video player, responsive video player, Technology, Tutorials, video player with zoom feature, video playlist html5
