Please help me with cdn libraries

[scara78]

<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>

--
  | <script src="https://cdn.jsdelivr.net/npm/@oplayer/ui@latest/dist/index.min.js"></script>
  | <script src="https://cdn.jsdelivr.net/npm/@oplayer/hls@latest/dist/index.min.js"></script>
  |  
  |

  |  
  | <script>
  | OPlayer.make(document.getElementById('oplayer'), {
  | source: {
  | src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  | poster: 'https://oplayer.vercel.app/poster.png'
  | }
  | })
  |  
  |  
  |  
  | .use([
  | OUI({
  | menu: [
  | {
  | name: 'source',
  | children: [
  | {
  | name: 'Server1',
  | default: true,
  | value: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
  | },
  | {
  | name: 'hls',
  | value: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
  | },
  | {
  | name: 'Server3',
  | value: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
  | },
  | ],
  | onChange({ value }) {
  | player.changeSource({ src: value })
  | }
  | }
  | ]
  | }),
  | OHls()
  | ])
  | .create();
  | </script>
  |
  |

What is wrong in my code, the player works only with mp4, on hls media is not supported.
Also, the media source is not changing on switch.
Please help me with correct code.
Thanks in advance

[shiyiya]

u need import hls.js

[shiyiya]

https://cdn.jsdelivr.net/npm/hls.js@1.2.4/dist/hls.min.js

@scara78

<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/ui@latest/dist/index.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/hls.js@1.2.4/dist/hls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/hls@latest/dist/index.min.js"></script>

<script>
  var player = OPlayer.make(document.getElementById('oplayer'), {
    source: {
      src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
      poster: 'https://oplayer.vercel.app/poster.png',
    },
  })

    .use([
      OUI({
        menu: [
          {
            name: 'source',
            children: [
              {
                name: 'Server1',
                default: true,
                value: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
              },
              {
                name: 'hls',
                value: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
              },
              {
                name: 'Server3',
                value: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
              },
            ],
            onChange({ value }) {
              //player.changeSource({ src: value })
              player.changeQuality({ src: value })
            },
          },
        ],
      }),
      OHls(),
    ])
    .create()
</script>

[scara78]

Uncaught ReferenceError: player is not defined
at Object.onChange (rp.php?id=tt11851548:53:15)
at HTMLDivElement. (index.ts:69:65)

its still not changing source, i got this error on developer tool
Thanks for help!

[shiyiya]

code updated #45 (comment)

[scara78]

works fine now, thank allot!
Still have one issue, on souce changing - the subtitle track are gone, i will have to refresh the player to bring him back.

[shiyiya]

When you change the video, you need to reset other things (eg: subtitle)
because they are bound to the video.

[shiyiya]

upgrade oplayer version. v1.0.53

use player.changeQuality(src)

[shiyiya]

If there are still problems, you can reopen this issue.