0.0.3 • Published 2 years ago

hls-player.js v0.0.3

Weekly downloads
-
License
-
Repository
github
Last release
2 years ago

hls-player.js

npm i hls-player.js -S

vue/react ...

import 'hls-player.js'

for vite/vue use demo: https://github.com/rust-learning-examples/dev-toolbox/blob/main/src/views/hlsPlayer/index.vue


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte + TS</title>
  </head>
  <body>
    <hls-player></hls-player>
    <!--<script type="module" src="/src/main.ts"></script>-->
    <script src="./dist/hls-player.js"></script>
    <script>
      const el = document.querySelector('hls-player')
      el.addEventListener('beforeMount', event => {
        el.options = {debug: false, autoplay: true, muted: true}
        const videoEl = event.detail.video
        console.log('mount', event.detail, videoEl)
        // https://hls-js.netlify.app/demo/
        el.src = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
      }, {once: true})
      el.addEventListener('mounted', event => {
        const videoEl = event.detail.video
        console.log('mounted', event.detail, videoEl)
      }, {once: true})
    </script>
  </body>
</html>