[Feature Request] 是否能够美化视频、音频控制器

[CitizensLi]

Prerequisites

• There isn't an existing issue that requests the same feature, to avoid duplicates.

Clear and concise description of the problem

我使用的是v0.10.3，目前显示的视频、音频标签还是原始的样式，是否有考虑优化一下？

Suggested solution

No response

Further Information

No response

Contributing

None

[sunsonliu]

感谢反馈，目前cherry生成的音视频的确是最原始的<video> 和 <audio>，如果是希望自定义音视频的html结构，可以参考这个配置哈 #746

[CitizensLi]

感谢反馈，目前cherry生成的音视频的确是最原始的<video> 和 <audio>，如果是希望自定义音视频的html结构，可以参考这个配置哈 #746

是的，我目前正在尝试使用videoWrapper，但是遇到了一个问题：

在渲染后，界面能够正常显示，但是无法正常的反馈鼠标事件（仅限PC端，在移动端却能够正常响应事件），我不确定是否是我哪一步做错了，因为当我把它直接在组件内使用时是正常的，对了，在cherry-markdown中挂载时，我使用了new MyComponent().$mount();的方式进行动态挂载，我想知道cherry-markdown中是否使用了事件委托？因为在AI给出的回答中，有一项我不是很理解：可能的问题根源 1. 事件委托/冒泡被阻止 Cherry-Markdown可能在预览区域使用了事件委托，并阻止了某些事件的默认行为或冒泡

我的代码：

可以正常反馈的

<template>
  <div class="home">
      <h3>作者：李军</h3>
      <evan-video-player url="/c-m/article/content/DJI_0301.MP4"></evan-video-player>
   </div>
</template>

不能正常反馈的（使用cherry-markdown时）

• 渲染配置

// cherry-markdown  syntax -> image部分
image: {
              selfClosing: true, // 自动闭合
              selfClosingRender: (type, name, url) => '', // 触发自动闭合时调用的渲染器，为空则使用默认渲染器
              videoWrapper: (link, type, defaultWrapper) => {
                switch (type) {
                  case 'video':
                    const posterUrl = link.replaceAll('/c-m/', '/c-m/preview/') + '.webp';
                    /**
                     * 字符串转hash
                     * @param {string} str - 输入字符串
                     * @returns {number} hash值
                     */
                    const stringToHash = (str) => {
                      let hash = 0;
                      for (let i = 0; i < str.length; i++) {
                        const char = str.charCodeAt(i);
                        hash = ((hash << 5) - hash) + char;
                        hash = hash & hash; // 转换为32位整数
                      }
                      return Math.abs(hash);
                    };

                    const id = 'CherryVideoWrapper'+stringToHash(link);
                    return CherryMDM.createComponentWithPostInsert({nodeStr: `<div data-src="${link}" data-poster-url="${posterUrl}" id="${id}"></div>`,onInserted:(element) =>{
                        this.createVideoComponent(link, id);
                      }});
                  default:
                    return defaultWrapper;
                }
              },

CherryMDM.createComponentWithPostInsert(config)

By AI

    /**
     * 创建组件并在元素被插入DOM后执行回调
     *
     * 该方法创建一个DOM元素，并监听该元素何时被添加到document.body中。
     * 当检测到元素被添加后，会触发onInserted回调，允许您在元素可访问时执行操作。
     * 如果元素在指定超时时间内未被添加，会清理观察器避免内存泄漏。
     *
     * 执行流程：
     * 1. 解析配置参数，设置默认值
     * 2. 根据nodeStr或tag创建DOM元素
     * 3. 设置元素的ID、类名和自定义属性
     * 4. 创建MutationObserver监听元素是否被添加到DOM
     * 5. 返回元素的outerHTML字符串
     * 6. 异步启动观察器，监听元素插入
     * 7. 当元素被插入时，触发onInserted回调
     *
     * @param {Object} options - 配置对象
     * @param {string} [options.tag='div'] - 要创建的HTML标签名
     * @param {string} [options.classNames=''] - 要添加的CSS类名，多个类名用空格分隔
     * @param {string} [options.nodeStr=''] - HTML字符串，如果提供则解析此字符串创建元素
     * @param {string} [options.id=`comp-${随机字符串}`] - 元素的ID，默认生成随机ID
     * @param {Object} [options.attributes={}] - 要设置的元素属性，支持data-*、aria-*等属性
     * @param {Function} [options.onInserted=()=>{}] - 元素被插入DOM后的回调函数，接收元素作为参数
     * @param {number} [options.timeout=10000] - 观察超时时间(毫秒)，超时后停止观察
     * @returns {string} 返回元素的outerHTML字符串，可直接插入到DOM中
     */
    createComponentWithPostInsert(options = {}) {
        console.log("createComponentWithPostInsert =>",options)
        // 解构配置参数，设置默认值
        const {
            tag = 'div',
            classNames = '',
            nodeStr = '',
            id = `comp-${Math.random().toString(36).substr(2, 9)}`,
            attributes = {}, // 添加属性对象
            onInserted = element => {
            },
            timeout = 10000,
            onTimeout = () => {
            },
            onError = null,
        } = options;

        let element = null; // 最终要创建的元素
        // 如果提供了nodeStr，则解析字符串创建元素
        if (nodeStr) {
            try {
                const parser = new DOMParser();
                const doc = parser.parseFromString(nodeStr, 'text/html');

                // 获取解析后的第一个元素
                const parsedElement = doc.body.firstElementChild;

                if (parsedElement) {
                    element = parsedElement;

                    // 确保元素有ID
                    if (!element.id) {
                        element.id = id;
                    }
                } else {
                    // 如果解析失败，回退到创建元素
                    element = document.createElement(tag);
                    element.id = id;

                }
            } catch (error) {
                if (onError !== null&&onError !== undefined&&typeof onError === 'function') {
                    onError(error);
                }else{
                    console.warn('解析nodeStr失败:', error);
                    element = document.createElement(tag);
                    element.id = id;
                }
            }
        } else {
            // 直接创建元素
            element = document.createElement(tag);
            element.id = id;
        }

        // 设置类名
        if (classNames) {
            if (classNames.includes(' ')) {
                const classItem = classNames.split(' ').filter(c => c.trim() !== '');
                for (let i = 0; i < classItem.length; i++) {
                    element.classList.add(classItem[i]);
                }
            } else {
                element.classList.add(classNames);
            }
        }

        // 设置自定义属性
        if (attributes && typeof attributes === 'object') {
            Object.keys(attributes).forEach(key => {
                // 特殊属性使用setAttribute设置
                if (key.startsWith('data-') || key.startsWith('aria-') ||
                    key === 'src' || key === 'href' || key === 'type' ||
                    key === 'value' || key === 'placeholder') {
                    element.setAttribute(key, attributes[key]);
                } else {
                    // 其他属性直接赋值
                    element[key] = attributes[key];
                }
            });
        }

        console.log("createComponentWithPostInsert ===>", element);
        // 监听元素是否被添加到DOM
        const observer = new MutationObserver(() => {
            console.log("createComponentWithPostInsert +++ =>",document.body.contains(element),document.getElementById(element.id))
            if (document.querySelector(`body #${element.id}`)) {
                observer.disconnect(); // 停止观察
                onInserted(element);   // 触发回调
            }
        });

        // 启动观察（异步，确保元素已返回）
        setTimeout(() => {
            // 只观察body的子节点变化
            observer.observe(document.body, {
                childList: true,  // 观察子节点的添加/删除
                subtree: true     // 观察所有后代节点
            });

            // 设置超时，防止无限期观察
            if (timeout > 0) {
                setTimeout(() => {
                    observer.disconnect();
                    // 可选：超时回调
                    onTimeout(element);
                }, timeout);
            }
        }, 0);

        // 返回元素的outerHTML字符串
        return element.outerHTML;
    },

createVideoComponent(link,id)

createVideoComponent(link,id) {
      if (id) {
        const elementById = document.getElementById(id);
        if (!elementById) {
          return;
        }

        const IconComponent = Vue.extend({
          components: {
            'evan-video-player': EvanVideoPlayer // 导入的 evan-icon 组件
          },
          render(h) {
            return h('evan-video-player', {
              props: {
                url:link
              },
            });
          }
        });

        const instance = new IconComponent().$mount();
        elementById.appendChild(instance.$el);
      }

    },

我的组件evan-video-player

<template>
<div class="evan-video-player" >
  <div :id="playerId"></div>
</div>
</template>

<script>
import Player, {Events} from "xgplayer";
import 'xgplayer/dist/index.min.css';
import {Toast} from "vant";
export default {
  name: "evan-video-player",
  computed: {

  },
  props: {
    url: {
      type: String,
      default: '/c-m/article/content/DJIOpening_Simulator_v02.mp4',
    },
    options: {
      type: Object,
      default: () => {
        return {};
      }
    },
  },
  data() {
    return{
      xPlayer: null,
      currentFileName: '',
      playerId:'none-id'
    }
  },
  methods: {
    /**
     * 字符串转hash
     * @param {string} str - 输入字符串
     * @returns {number} hash值
     */
    stringToHash(str) {
      let hash = 0;
      for (let i = 0; i < str.length; i++) {
        const char = str.charCodeAt(i);
        hash = ((hash << 5) - hash) + char;
        hash = hash & hash; // 转换为32位整数
      }
      return Math.abs(hash);
    },

    generatePlayerId(link) {
      console.log("generatePlayerId",link)
      // 基于链接生成hash
      const hash = this.stringToHash(link);
      this.playerId =  `XGPlayer-${hash}`;
    },
    getPoster(url) {
      if (url.startsWith('/c-m')) {
        return url.replaceAll('/c-m/', '/c-m/preview/') + '.webp';

      }else{
        return '';
      }
    },
    /**
     * 配置项                含义
     * comments             弹幕数组
     * area                 弹幕显示区域
     * closeDefaultBtn      开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
     * defaultOff           开启此项后弹幕不会初始化，默认初始化弹幕
     * @returns {{area: {start: number, end: number}, comments: *[], closeDefaultBtn: boolean, defaultOff: boolean}}
     */
    initComments() {
      return {
        comments: [
        ],
        area: {  //弹幕显示区域
          start: 0, //区域顶部到播放器顶部所占播放器高度的比例
          end: 1 //区域底部到播放器顶部所占播放器高度的比例
        },
        panel: true, //弹幕面板
        closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
        defaultOff: true //开启此项后弹幕不会初始化，默认初始化弹幕
      }
    },
    initPlayer(url) {
      let toast = Toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        className: 'load-video-toast',
        overlay: true,
        duration:0
      });
      const bindingEl = document.getElementById(this.playerId);
      console.log(bindingEl)
      this.xPlayer = new Player({
        //id: this.playerId,
        el: bindingEl,
        url: url,
        height: '100%',
        width: '100%',
        lang: 'zh-cn',//i18n
        fluid: true,//是否启用流式布局，启用流式布局时根据width、height计算播放器宽高比，若width和height不是Number类型，默认使用16:9比例
        fitVideoSize: 'auto',//播放器容器尺寸适配方式，在视频资源初始化之后，根据获取到的videoWidth和videoHeight的比例对播放器容器宽高进行调整
        videoFillMode: 'contain',//video画面填充模式
        autoplay: false,//目前大多数浏览器厂商不建议播放器自动播放视频，开发者对此有特殊需求时可通过该配置项打开。
        videoInit: true,//播放器默认不会初始化视频，如果需要在没有设置poster的情况下显示视频首帧，可通过设置videoInit配置项实现。该配置在移动端无效。该配置与autoplay配置项不可同时设置为true。
        poster: this.getPoster(url),
        playbackRate: [0.5, 1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5, 10],//播放器支持设置视频的当前播放速度,playbackRateUnit设置倍速展示单位。
        defaultPlaybackRate: 1,//可通过defaultPlaybackRate设置初始速度。
        playbackRateUnit: 'X',//播放速度的单位
        lastPlayTime: 0, //视频起播时间（单位：秒）
        lastPlayTimeHideDelay: 5, //提示文字展示时长（单位：秒）
        rotate: {   //视频旋转按钮配置项
          innerRotate: true, //只旋转内部video
          clockwise: true // 旋转方向是否为顺时针
        },
        /**
         * 部分移动端场景的系统默认全屏功能不支持横屏，播放器支持通过配置 rotateFullscreen: true 使触发全屏时实现样式横屏全屏。
         * 使用该配置时不需配置rotate和cssFullscreen。
         */
        rotateFullscreen: true,
        download: true, //设置download控件显示
        danmu: this.initComments(),
        pip: true,//启用画中画插件
        miniplayer: true,//迷你播放器功能支持用户在浏览网页其它内容时继续以小窗的形式观看视频，同时可以拖拽改变小窗在页面中的fix位置。
        miniplayerConfig: {
          bottom: 200,
          right: 0,
          width: 320,
          height: 180
        },
        cssFullscreen:false,//样式全屏功能不会隐藏当前浏览器的标签栏，导航栏，只是在当前页面内部全屏显示。
        /**
         * 配置项：saveImg
         * 含义：是否下载截图
         * 默认值：true
         * 参考值：true | false
         *
         * 配置项：quality
         * 含义：截图质量
         * 默认值：0.92
         *
         * 配置项：type
         * 含义：图片格式
         * 默认值：'image/png'
         *
         * 配置项：format
         * 含义：下载截图后缀名
         * 默认值：'.png'
         * #预览本地视频
         */
        screenShot: { //截图功能支持用户对当前视频播放窗口进行 即时截屏，截图尺寸即为当前视频播放窗口的尺寸，截图默认为 .png 格式
          saveImg: true,
          quality: 1,
          type: 'image/png',
          format: '.png'
        },
       
        /**
         * 插件生效前执行
         * 播放器使用自执行的插件机制，如需要在插件生效前执行某些方法，开发者可将相关方法写在execBeforePluginsCall配置项数组中
         *
         * 配置项：execBeforePluginsCall
         * 默认值：[]
         */
        execBeforePluginsCall: [() => {
          console.log('Execute before plugins call')
        }],
        closeVideoClick:true,
        closeVideoDblclick:false,
        controls:true,//true/false决定是否使用底部控制栏，也可以赋值为一组控制栏插件的配置项，具体使用方式请看internalPlugins -> controls
        miniprogress: true,//是否启用mini进度条，设置true时，在控制栏隐藏的时候会在底部显示一个迷你进度条
        commonStyle: {
          // 进度条底色
          progressColor: '#22272E',
          // 播放完成部分进度条底色
          playedColor: '#FFF',
          // 缓存部分进度条底色
          cachedColor: '#409EFF',
          // 进度条滑块样式
          sliderBtnStyle: {
            color: '#f00'
          },
          // 音量颜色
          volumeColor: '#409EFF'
        },

        videoAttributes: {
          crossOrigin: 'anonymous'
        },
        enableContextmenu: true,
      });
      const status = (state) => {
        switch (state) {
          case 0:
            return {name:'ERROR',desc:'播放出现错误'};
            break;
          case 1:
            return {name:'INITIAL',desc:'初始化'};
            break;
          case 2:
            return {name:'READY',desc:'配置/事件/插件等均已经初始化/绑定/实例化完成'};
            break;
          case 3:
            return {name:'ATTACHING',desc:'进入媒体对象挂载阶段'};
            break;
          case 4:
            return {name:'ATTACHED',desc:'媒体对象已经挂载到了DOM中'};
            break;
          case 5:
            return {name:'NOTALLOW',desc:'播放被阻止'};
            break;
          default:
            return {name:'UNCAUGHT EXCEPTION', desc: '未捕获异常'}
        }

      }
      this.xPlayer.on(Events.LOADED_DATA, () => {
        console.log('进入loadData')
        toast = Toast.success({message: '视频加载完毕！', duration: 0, overlay: true,});
        setTimeout(() => {
          toast.clear();

        }, 2000)

      });
      //旋转事件
      this.xPlayer.on('rotate', (deg) => {
        console.log(deg);// 旋转时会触发rotate事件，角度有四个值90，180，270，0
      });

      this.xPlayer.on(Events.ERROR,(err) =>{
        console.log(Events.ERROR,err)
      })

      this.xPlayer.on(Events.READY,() =>{
        console.log(Events.READY);


        this.xPlayer.on(Events.COMPLETE,() =>{
          console.log(Events.COMPLETE)
        })

        this.xPlayer.on(Events.URL_CHANGE,() =>{
          console.log(Events.URL_CHANGE)
        })

        this.xPlayer.on(Events.PLAYER_FOCUS,() =>{
          console.log(Events.PLAYER_FOCUS)
        })

        this.xPlayer.on(Events.PLAYER_BLUR,() =>{
          console.log(Events.PLAYER_BLUR)
        })

        this.xPlayer.on(Events.FULLSCREEN_CHANGE,() =>{
          console.log(Events.FULLSCREEN_CHANGE)
        })

        this.xPlayer.on(Events.DESTROY,() =>{
          console.log(Events.DESTROY)
        })

        this.xPlayer.on(Events.REPLAY,() =>{
          console.log(Events.REPLAY)
        })

        this.xPlayer.on(Events.RETRY,() =>{
          console.log(Events.RETRY)
        })

        this.xPlayer.on(Events.DEFINITION_CHANGE,() =>{
          console.log(Events.DEFINITION_CHANGE)
        })

        this.xPlayer.on(Events.SEI_PARSED,() =>{
          console.log(Events.SEI_PARSED)
        })

        this.xPlayer.on(Events.USER_ACTION,() =>{
          console.log(Events.USER_ACTION)
        })


        this.xPlayer.on(Events.LOAD_START,() =>{
          console.log(Events.LOAD_START)
        })
        this.xPlayer.on(Events.LOADED_DATA,() =>{
          console.log(Events.LOADED_DATA)
        })
        this.xPlayer.on(Events.PLAY,() =>{
          console.log(Events.PLAY)
        })
        this.xPlayer.on(Events.PAUSE,() =>{
          console.log(Events.PAUSE)
        })
        this.xPlayer.on(Events.ENDED,() =>{
          console.log(Events.ENDED)
        })
        this.xPlayer.on(Events.ERROR,() =>{
          console.log(Events.ERROR)
        })
        this.xPlayer.on(Events.PLAYING,() =>{
          console.log(Events.PLAYING)
        })
        this.xPlayer.on(Events.SEEKING,() =>{
          console.log(Events.SEEKING)
        })
        this.xPlayer.on(Events.SEEKED,() =>{
          console.log(Events.SEEKED)
        })
        this.xPlayer.on(Events.TIME_UPDATE,() =>{
          console.log(Events.TIME_UPDATE)
        })
        this.xPlayer.on(Events.WAITING,() =>{
          console.log(Events.WAITING)
        })
        this.xPlayer.on(Events.CANPLAY,() =>{
          console.log(Events.CANPLAY)
        })
        this.xPlayer.on(Events.CANPLAY_THROUGH,() =>{
          console.log(Events.CANPLAY_THROUGH)
        })
        this.xPlayer.on(Events.DURATION_CHANGE,() =>{
          console.log(Events.DURATION_CHANGE)
        })
        this.xPlayer.on(Events.VOLUME_CHANGE,() =>{
          console.log(Events.VOLUME_CHANGE)
        })
        this.xPlayer.on(Events.RATE_CHANGE,() =>{
          console.log(Events.RATE_CHANGE)
        })
      })


    },
    destroyPlayer() {
      console.log(this.xPlayer);
      if (this.xPlayer !== undefined && this.xPlayer !== null && this.xPlayer !== '') {
        this.xPlayer.destroy()
      }
    },
  },
  mounted() {

  },
  destroyed() {
    this.destroyPlayer();
  },
  watch:{
    url:{
      handler(newVal, oldVal) {
          console.log("newVal ===========>",newVal,"oldVal ======>",oldVal);
        if (newVal) {
          if (this.xPlayer) {
            this.destroyPlayer();
          }
          this.generatePlayerId(this.url);
          this.$nextTick((cb) => {
            this.initPlayer(this.url);
          })
        }
      },
      immediate: true,

    }
  }
}
</script>

<style lang="scss">
.evan-video-player {
  min-width: 200px;
  min-height: 134px;
  background-color: #0a58ca;
}


.xgplayer.xgplayer-inactive{
  cursor: pointer;
}
</style>

[CitizensLi]

也许我的问题比较简单，不过希望别介意，因为我确实技术很一般，我的主业是旅游，这个只是我的爱好，但我还是想搞清楚

对了，以下是我的配置：

{
  "dependencies":{
   // 其他依赖 ... ...
    "vue": "^2.7.16",
    "xgplayer": "^3.0.23",
    "xgplayer-flv": "^3.0.23",
    "xgplayer-hls": "^3.0.23",
    "xgplayer-vue": "^1.1.5",
    "cherry-markdown": "^0.10.3",
   // 其他依赖 ... ...
  }
}

[sunsonliu]

我们最近确实发现cherry在预览区对 <a> 标签做了click事件冒泡拦截，我们在一个PR中对这个问题进行了修复，目前还没有发正式版，可以 npm i https://pkg.pr.new/cherry-markdown@1618 安装这个版本试试哈

[sunsonliu]

也许我的问题比较简单，不过希望别介意，因为我确实技术很一般，我的主业是旅游，这个只是我的爱好，但我还是想搞清楚

哈哈，不会的不会的，能为爱好付诸实践已经非常厉害啦，大家都是从新手过来的，只要保持这个爱好咱们都能成为大牛~ 另外这个问题不出意外还是我们的问题导致的

[CitizensLi]

我们最近确实发现cherry在预览区对 <a> 标签做了click事件冒泡拦截，我们在一个PR中对这个问题进行了修复，目前还没有发正式版，可以 npm i https://pkg.pr.new/cherry-markdown@1618 安装这个版本试试哈

应该与此无关，因为在渲染的html中，xgplayer并没有a标签，反而是有一些莫名其妙的自定义标签，例如：xg-poster,xg-start,xg-loading,xg-error等，而且有一个莫名其妙的现象：昨晚调试一半休息了，网页和项目都没有关，今天晚上回来之后再打开的时候，又可以正常的执行点击事件了，但当我再次刷新后，又不可以点击了