Live
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.17/mediaelementplayer.min.css" rel="stylesheet"/> <title>MediaElement.js Example</title></head><body> <div class="player__wrapper"> <video id="mejs" class="mejs__player" controls poster="path/to/poster" src="https://demopage.gcdn.co/videos/2675_10hwQ62gN4IRs6Es/master.m3u8" type="application/x-mpegURL" width="100%"/> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.17/mediaelement-and-player.min.js"></script></body></html>
Live
xxxxxxxxxx4
.player__wrapper { margin: 20px auto; width: 600px;}
Live
x
const player = new MediaElementPlayer('mejs', { pluginPath: "https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.17/mediaelement-flash-video-hls.swf", success: function(mediaElement, originalNode, instance) { // do what you need } });
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.