--- title: OpenplayerJSの使用法 tags: JavaScript Video HTML5 HLS mpeg-dash author: mehdi slide: false --- Screen Shot 2019-02-19 at 10.30.58.png ##はじめに こんにちは streampack チームのメディです。 https://cloudpack.jp/service/option/streampack.html In my opinion ***OpenPlayerJS*** is a really interesting player and I would like to show you common use cases. OpenPlayerJS is simple and easy to use. ***Plyr*** は興味深いプレイヤーなので、一般的な使用法を説明します。Plyrはシンプルで使いやすいです。 ##Copyrights of videos **Big Buck Bunny** © copyright 2008, Blender Foundation | www.bigbuckbunny.org **Sintel** © copyright Blender Foundation | www.sintel.org **Tears of Steel** © copyright Blender Foundation | https://mango.blender.org/ ##What is OpenPlayerJS ・OpenPlayerJSとは **OpenPlayerJS** is an open sources JavasScript media player for the web. **OpenPlayerJS** はウェブ用のオープンソースJavascriptメディアプレーヤーです。 ##Objective・目的 Learning how to use OpenPlayerJS through simple examples. OpenPlayerJSの簡単な例を学ぶこと。 #Simple example・ 簡単な実装 ![simple_opj2.jpg](https://qiita-image-store.s3.amazonaws.com/0/229807/3dcfc646-0b80-e632-82ce-e7996df0789d.jpeg) ```html ``` ###Demo・デモ https://codepen.io/mr1985/pen/OJLeZJP *Alternative way ・別の方法* ```html ``` ##Demo ・デモ https://codepen.io/mr1985/pen/gOYNzbY #HLS ![opjs2.jpeg](https://qiita-image-store.s3.amazonaws.com/0/229807/9fd186b2-724a-75ca-1e40-52c2d15d30bf.jpeg) ```html ``` ##Demo ・デモ https://codepen.io/mr1985/pen/qBWzYEJ #MPEG Dash ![opjs3.jpg](https://qiita-image-store.s3.amazonaws.com/0/229807/e0a7800c-701a-1fdb-4e47-96dbc3b87c30.jpeg) ```html ``` ##Demo ・デモ https://codepen.io/mr1985/pen/ExYBLjL #Subtitles・字幕 ![opjs5.jpg](https://qiita-image-store.s3.amazonaws.com/0/229807/51fb4a6d-7f49-1be5-9c24-5bee3734e334.jpeg) ```html ``` ##Demo・デモ https://codepen.io/mr1985/pen/NWKZMbb # Google IMA ads Screen Shot 2019-10-02 at 14.37.36.png ```html