Dash.js在React中监听缓冲事件不触发怎么办？

圣哲提问于 2026-01-27 18:18:31 阅读 26

交互

我用Dash.js在React里做视频播放，想监听缓冲开始事件来显示加载提示。按照文档写了事件绑定，但控制台一直没输出，是哪里漏了吗？


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

const VideoPlayer = ({ src }) => {
  const playerRef = useRef();

  useEffect(() => {
    const player = dashjs.createPlayer({
      referenceId: playerRef.current.id,
      autoPlay: true,
      streaming: {
        bufferingTime: 2
      }
    });
    player.initialize();
    player.attachSource(src);

    // 这里绑定事件没反应
    player.on('bufferingstart', () => {
      console.log('开始缓冲了！'); // 没有输出
    });

    return () => player.destroy();
  }, [src]);

  return

尝试过换成’onBufferStart’和’onBuffer’事件名都不行，视频能正常播放但缓冲提示一直不显示。控制台也没报错，求大佬指点！

Dash.js

我来解答赞 5 收藏

反馈

2 条解答

A. 志鸽 Lv1

这个问题我踩过坑，原因在于你用的事件名是错的。Dash.js 的事件监听不是用 bufferingstart，而是 BUFFERING_STARTED。而且必须用 dashjs.MediaPlayer.events 里面定义的常量，否则绑定无效。

下面是修复后的代码：

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

import dashjs from 'dashjs';



const VideoPlayer = ({ src }) => {

  const playerRef = useRef();



  useEffect(() => {

    const player = dashjs.createPlayer({

      referenceId: playerRef.current.id,

      autoPlay: true,

      streaming: {

        bufferingTime: 2

      }

    });

    player.initialize();

    player.attachSource(src);



    // 正确的事件名写法

    const BUFFERING_STARTED = dashjs.MediaPlayer.events.BUFFERING_STARTED;

    player.on(BUFFERING_STARTED, () => {

      console.log('开始缓冲了！');

    });



    return () => player.destroy();

  }, [src]);



  return <video id="player" ref={playerRef} />;

};

血泪教训：Dash.js 的文档写得挺坑，很多事件名不是直觉写法，比如还有 PLAYBACK_ENDED、ERROR 等，一定要去查它源码里的 MediaPlayer.events 才行。你写的 bufferingstart 这种命名是 Angular 或是某些其他框架的写法，Dash.js 不认这个。

2026-02-03 14:05

正汉的笔记 Lv1

问题出在事件名上，Dash.js 的事件绑定确实有点坑。按照官方文档的规范，事件名不应该直接用字符串，而是要用 Dash.js 提供的常量。

你现在的代码里写的是 'bufferingstart'，但实际上应该用 dashjs.MediaPlayer.events.BUFFERING_START 这个常量。这是 Dash.js 推荐的最佳实践，能避免拼写错误的问题。

修改后的代码如下：

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

import dashjs from 'dashjs';



const VideoPlayer = ({ src }) => {

  const playerRef = useRef();



  useEffect(() => {

    const player = dashjs.createPlayer({

      referenceId: playerRef.current.id,

      autoPlay: true,

      streaming: {

        bufferingTime: 2

      }

    });

    player.initialize();

    player.attachSource(src);



    // 修改这里，用正确的事件常量

    player.on(dashjs.MediaPlayer.events.BUFFERING_START, () => {

      console.log('开始缓冲了！');

    });



    // 别忘了监听缓冲结束事件

    player.on(dashjs.MediaPlayer.events.BUFFERING_END, () => {

      console.log('缓冲结束了！');

    });



    return () => player.destroy();

  }, [src]);



  return <video ref={playerRef} style={{ width: '100%' }} />;

};



export default VideoPlayer;

另外，记得也监听一下 BUFFERING_END 事件，这样可以更完整地处理加载提示的显示和隐藏逻辑。

这种问题真是让人头大，明明视频能正常播放，但事件就是不触发，其实很多时候是细节没踩对。希望这次能解决你的问题！

2026-01-29 11:02