H.264/H.265播放器EasyPlayer.js网页直播/点播播放器关于其内部的样式发生变形或者class丢失

EasyPlayer.js是一款功能强大的H5播放器，专为网页端视频流媒体播放而设计。它支持多种视频协议和音视频编码格式，兼容视频直播与点播功能，广泛应用于娱乐、教育、视频监控和企业培训等领域。

问题描述

播放器内部的样式发生变形或者class丢失。

可能的原因

播放器样式被其他样式覆盖了，检查下是否有全局样式覆盖了播放器的样式（播放器内部会有video,canvas标签）。

container设置了双向绑定，导致class丢失。

推荐的vue写法：

<template>
    <div class="wrap">
        <!--  不要绑定任何的 :class :style 样式  -->
        <div ref="container"></div>
    </div>
</template>
<script>
    export default {
        name: 'App',
        mounted() {
            // 通过 ref 获取到 dom 节点
            const dom = this.$refs['container']
            // 通过 dom 节点获取到 player 实例
            const player = new window.EasyPlayer({
                container: dom,
            })
            this.player = player;
        },
        async unmounted() {
            await this.player.destroy();
        }
    }
</script>

推荐的react写法：

import React, {useEffect, useRef} from 'react'

export default function App() {
    const container = useRef(null)
    useEffect(() => {
        const player = new window.EasyPlayer({
            container: container.current,
        })
    }, [])
    return (
        <div className="wrap">
            <div ref={container}></div>
        </div>
    )
}

EasyPlayer.js支持包括HTTP、HTTP-FLV、HLS（m3u8）、WebSocket、WebRTC、FMP4等多种视频协议。这些协议使得播放器能够轻松应对各种流媒体传输场景。同时，它还支持H.264、H.265、AAC、G711A、MP3等多种音视频编码格式，兼容MSE、WASM、WebCodec等多种解码方式。这些特性确保了播放器能够播放来自各种源的音视频流，无论是监控摄像头、实时直播还是点播内容。

H5无插件流媒体播放器EasyPlayer.js属于一款高效、精炼、稳定且免费的流媒体播放器，适用于Windows、Linux、Android和iOS等全平台终端。这意味着用户可以在任何设备上无缝观看视频内容，无需担心兼容性问题。此外，播放器的操作简便，性能卓越，能够在各种网络环境下提供流畅的播放体验。