Introduction

OPlayer

⚡ Oh! Another HTML5 video player.

https://oplayer.vercel.app ・ https://ohplayer.netlify.app

npm npm bundle size GitHub license npm dt jsdelivr Discord Netlify Status

oplayer

Feature

  • Streaming formats
    • HLS (track, subtitles, audio track selection)
    • MPEG DASH (track, subtitles (also segmented), audio track selection)
    • FLV
    • WebTorrent
    • Any other custom streaming formats
  • Features
    • Danmaku
    • Screenshot
    • Hotkeys
    • Thumbnails (spirit or vtt)
    • Subtitles (formats: SRT, WEBVTT with HTML tags support; subtitles from HLS; multiple subtitles for video)
    • Highlight Marker
    • Playlist
    • ... and much more!

Usage

1. Use the module manager to import:

npm i @oplayer/core @oplayer/ui @oplayer/hls
import Player from '@oplayer/core'
import ui from '@oplayer/ui'
import hls from '@oplayer/hls'
 
Player.make('#oplayer', {
  source: {
    src: 'https://oplayer.vercel.app/君の名は.mp4',
    poster: 'https://oplayer.vercel.app/poster.png'
  }
})
  .use([ui(), hls()])
  .create()

2. Use the script tag to introduce:

<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/hls@latest/dist/index.hls.js"></script>
 
<div id="oplayer" />
 
<script>
  OPlayer.make('#oplayer', {
    source: {
      src: 'https://oplayer.vercel.app/君の名は.mp4',
      poster: 'https://oplayer.vercel.app/poster.png'
    }
  })
    .use([OPlayer.ui(), OHls()])
    .create()
</script>

Plugins

Who use OPlayer?

  • UPV : free animes no ad
  • enime.moe : An anime streaming site. Just hop in and watch with speed without VPN or ads
  • Feel free to submit yours in Let me know!

Support

If you think this is super cool, or useful, and want to donate a little, then you are also super cool!

Jetbrains

This project is helped by Jetbrains with their open source program. More information here

Guide