Untitled

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.8/mediaelementplayer.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.8/mediaelementplayer-legacy.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/chromecast/chromecast.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/airplay/airplay.min.css">
<style>
</style>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.8/mediaelement.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.8/mediaelement-and-player.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/chromecast/chromecast.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/airplay/airplay.min.js"></script>
<script>
var video   = '<video id="vid">'
video       += '<track label="English" kind="subtitles" srclang="en" src="https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt" default>'
video       += '</video>'

document.body.innerHTML = video

var player = new MediaElementPlayer('vid', {
    startLanguage: 'en',
    videoWidth: '100%',
    videoHeight: '100%',
    hideVolumeOnTouchDevices: false,
    features: ['playpause', 'volume', 'progress', 'current', 'tracks', 'chromecast', 'airplay', 'fullscreen'],
    castEnableTracks: true
});
player.setSrc('https://vjs.zencdn.net/v/oceans.mp4')
player.load();
player.play()
</script>

</body>
</html>