No Description Available
0
MediaElementJs is an open-source Html5 video player that can supports Video, Audio, Streaming, and multiple social media video playback.
onex
Videojs is the most popular widely used open-source HTML5 video player that supports modern streaming formats as well as Youtube, Vimeo, and even flash files through the plugin.
// Setup Using jQuery // $('audio,video').mediaelementplayer({ // //mode: 'shim', // success: function(player, node) { // $('#' + node.id + '-mode').html('mode: ' + player.pluginType); // } // }); // Setup using Vanilla Javascript var player = new MediaElementPlayer("player", { pluginPath: "/path/to/shims/", // When using `MediaElementPlayer`, an `instance` argument // is available in the `success` callback success: function(mediaElement, originalNode, instance) { // do things } }); // State every at 500 mili seconds setInterval(function() { $(".current").html(`<tbody> <tr><td>currentTime</td><td><code>${player.currentTime}</code></td></tr> <tr><td>duration</td><td><code>${player.duration}</code></td></tr> <tr><td>volume</td><td><code>${player.volume}</code></td></tr> <tr><td>src</td><td><code>${player.src}</code></td></tr> <tr><td>readyState</td><td><code>${player.readyState}</code></td></tr> <tr><td>paused</td><td><code>${player.paused}</code></td></tr> <tr><td>muted</td><td><code>${player.muted}</code></td></tr> <tr><td>ended</td><td><code>${player.ended}</code></td></tr> </tbody`); let state = "<tbody>"; for (var key in player) { if (!player.hasOwnProperty(key)) continue; state += `<tr><td>${key}</td><td>`; if (typeof player[key] == "object" || typeof player[key] == "function") { state += `<td><code>${player[key]}</code></td>`; } else { state += `<td>${player[key]}</td>`; } state += "</tr>"; } // } $(".info").html(state); }, 500);
<div class="player"> <div class="player-wrapper"> <video id="player" poster="//www.mediaelementjs.com/images/big_buck_bunny.jpg" preload="none" controls playsinline webkit-playsinline style="max-width:100%" > <source src="//commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" type="video/mp4" /> <track srclang="en" kind="subtitles" src="mediaelement.vtt" /> <track srclang="en" kind="chapters" src="chapters.vtt" /> </video> </div> <div class="player-state table-responsive"> <table class="table table-hover table-striped table-dark current" ></table> <table class="table table-sm table-hover table-striped table-dark info" ></table> </div> </div>