OPlayer

October 1, 2022 · View on GitHub

Oh! Another HTML5 video player.

Website: https://oplayer.vercel.app | https://shiyiya.github.io/oplayer

Examples: ./examples | Contributing

Discussions: Discord | QQGroup

npm npm bundle size npm bundle size (scoped) npm bundle size (scoped) npm dw donate

oplayer

Feature

  • Streaming formats
    • HLS
    • MPEG DASH
    • WebTorrent
    • FLV
    • Any other custom streaming formats
  • Media formats
    • MP4 H.264
    • WebM
    • Ogg Theora Vorbis
  • Features
    • Danmaku
    • Screenshot
    • Hotkeys
    • Thumbnails
    • Subtitle

Usage

1. Use the module manager to import:

pnpm i @oplayer/core @oplayer/ui @oplayer/hls
# or
yarn add @oplayer/core @oplayer/ui @oplayer/hls

import Player from '@oplayer/core'
import ui from '@oplayer/ui'
import hls from '@oplayer/hls'

Player.make(document.body, {
  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.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/ui@latest/dist/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/hls@latest/dist/index.umd.js"></script>

<div id="oplayer" />

<script>
  OPlayer.make(document.getElementById('oplayer'), {
    source: {
      src: 'https://oplayer.vercel.app/君の名は.mp4',
      poster: 'https://oplayer.vercel.app/poster.png'
    }
  })
    .use([OUI(), OHls()])
    .create()
</script>

Official plugin

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
  • ...

Thanks