Skip to content

Instantly share code, notes, and snippets.

@bachloxo

bachloxo/plyr_sample.html

Last active August 29, 2020 08:32
Show Gist options
  • Save bachloxo/b5f3dec57b07a3509846bed973b56b93 to your computer and use it in GitHub Desktop.
Save bachloxo/b5f3dec57b07a3509846bed973b56b93 to your computer and use it in GitHub Desktop.
Download ZIP
plyr sdk sample
Raw
plyr_sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Plyr sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/plyr/3.3.6/plyr.css" />
</head>
<body>
<div>
<div id="container" style="width:80%; margin:auto;">
<h1>Plyr Sample</h1>
<video controls crossorigin playsinline id="player">
<!-- iOSはネイティブでHLS対応のためsourceを使用。その他はhls.jsで再生。 -->
<source
src="https://xxxx/xxxx.m3u8"
type="application/x-mpegURL"
size="576"
/>
</video>
</div>
</div>
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.3.6/plyr.min.js"></script>
<script type="text/javascript">
var video = document.querySelector('video');
if (Hls.isSupported()) { //iOS以外はtrue(=MSEをサポート)
var hls = new Hls();
hls.loadSource('https://xxxx/xxxx.m3u8');
hls.attachMedia(video);
}
var player = new Plyr(video, {});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment