<!-- Minimal setup for deep experience & commercial interactive engine -->
<script src="https://cdn.zwplayer.com/v3/zwplayer/zwplayer.js"></script>
<script>
    const player = new ZWPlayer({
        playerElm: '#mse',
        url: 'https://example.com/test.m3u8',// Smart detection for TRTC/ARTC/RTSP/HLS
        annotations: 'annotation.json',     // Two-way interactive quizzes, forms & branches
        watermarks: 'watermark.json',       // Millisecond anti-recording dynamic watermark
        localPlayback: true                 // Enable offline local file drag-and-drop parsing
    });
</script>

# Install Vue 3 component package
npm install zwplayervue3

// Vue SFC declarative usage, out of the box
<template>
  <zwplayer ref="zwplayerRef" :fluid="true"
    url="https://example.com/test.m3u8"
    annotations='annotation.json'
    watermarks='watermark.json' />
</template>

<script setup>
import { ref } from 'vue'
import { zwplayer } from 'zwplayervue3'
const zwplayerRef = ref(null)
</script>

# Install React component package
npm install zwplayer-react

// React component declarative usage
import React, { useRef } from 'react';
import { ZwPlayer } from 'zwplayer-react';

export function DemoZwplayer() {
  return (
    <div style={{ padding: '5px', width: '100%', margin: '0 auto' }}>
      <ZwPlayer
        ref={useRef(null)}
        fluid={true}
        url="https://example.com/test.m3u8"
        annotations="annotation.json"
        watermarks="watermark.json"
      />
    </div>
  );
}