如何在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




