You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Plyr JavaScript插件中检测视频是否正在播放?

解决Plyr视频播放状态检测问题

嘿,我来帮你搞定这个Plyr播放检测的问题!你的代码没法正常运行主要有两个原因:一是你只在页面加载完成时一次性判断播放状态,这时候视频大概率还没被用户触发播放;二是对Plyr的状态检测方式理解有点偏差。

原代码的问题分析

你之前的代码是在jQuery就绪后初始化播放器,紧接着就判断player.playing——但这个时机视频还没开始播放,所以条件永远不成立,alert自然不会弹出来。而且player.playing是个动态更新的布尔值,只判断一次根本抓不到用户后续触发播放的动作。

正确的解决方案:监听Plyr事件

Plyr提供了完善的事件系统,我们可以通过监听play事件来实时捕获视频开始播放的动作,这正好适合你的统计收集需求。修改后的代码如下:

// 等DOM完全加载后再初始化播放器
jQuery(function ($) {
  const player = new Plyr('#video1', { 
    controls: ['play-large', 'play', 'progress', 'current-time', 'captions', 'fullscreen', 'settings'] 
  });

  // 监听视频播放事件,每次播放都会触发
  player.on('play', () => {
    alert("playing!!");
    // 这里替换成你的AJAX统计代码
    // 示例:
    // $.ajax({
    //   url: '你的统计接口地址',
    //   method: 'POST',
    //   data: { action: 'video_played' }
    // });
  });

  // 可选:监听暂停事件,做额外处理
  player.on('pause', () => {
    console.log("视频暂停了");
  });
});

额外场景:主动检查播放状态

如果你需要在某个特定时机(比如点击某个按钮时)主动检查视频是否在播放,可以直接使用player.playing属性,比如:

// 假设你有个按钮,点击时检查状态
$('#check-status-btn').click(() => {
  if (player.playing) {
    alert("视频正在播放中");
  } else {
    alert("视频没在播放");
  }
});

补充:检测自动播放的情况

如果你的视频设置了自动播放,想要在页面加载时就检测到,可以监听Plyr的ready事件:

player.on('ready', () => {
  if (player.playing) {
    alert("视频一加载就自动播放了!");
  }
});

内容的提问来源于stack exchange,提问作者easypronunciation

火山引擎 最新活动