No Description Available

No Description Available
0
MediaElementJs is an open-source Html5 video player that can supports Video, Audio, Streaming, and multiple social media video playback.
// 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>