notation/src/components/the-video/index.tsx

import { defineComponent, reactive, ref } from "vue";
import styles from "./index.module.less";
import { Icon } from "vant";
export default defineComponent({
	name: "the-video",
    props:{
        src: {
            type: String,
            default: ''
        }
    },
	setup(props) {
        const videoRef = ref()
		const videoData = reactive({
			play: false,
		});
        const toggle = () => {
            videoData.play = !videoData.play
            if (videoData.play) {
                videoRef.value?.play()
            } else {
                videoRef.value?.pause()
            }
        }
		return () => (
			<div class={styles.wrap}>
				<video ref={videoRef} preload="auto" controls class={styles.video} src={props.src}></video>
				{/* <div class={styles.playBtn} onClick={toggle}>{videoData.play ? <Icon name="pause-circle" /> : <Icon name="play-circle" />}</div> */}
			</div>
		);
	},
});