如何配置Fluid Player实现视频播放完毕后自动暂停

核心修改步骤 #

• 关闭自动循环：将配置中的loop: true改为loop: false，启用循环会导致视频播放完毕后自动重播，与需求冲突。
• 监听播放结束事件：添加视频ended事件的监听，确保在播放完成后主动触发暂停（适配含广告等复杂场景的稳定性）。

修改后完整代码 #

<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>
<video id="video-id">
    <source src="video.mp4" type="video/mp4" />
</video>
<script>
var myFP = fluidPlayer(
    'video-id', {
        "layoutControls": {
            "controlBar": {
                "autoHideTimeout": 3,
                "animated": true,
                "autoHide": true
            },
            "htmlOnPauseBlock": {
                "html": null,
                "height": null,
                "width": null
            },
            "autoPlay": true,
            "mute": true,
            "allowTheatre": true,
            "playPauseAnimation": true,
            "playbackRateEnabled": true,
            "allowDownload": false,
            "loop": false, // 关闭自动循环，实现播放后暂停的基础配置
            "playButtonShowing": true,
            "fillToContainer": true,
            "posterImage": ""
        },
        "vastOptions": {
            "adList": [
                {
                    "roll": "preRoll",
                    "vastTag": "https://www.videosprofitnetwork.com/watch.xml?key=ddbbe516ba5a32d04f608af9bb011c1a",
                    "adText": ""
                }
            ],
            "adCTAText": false,
            "adCTATextPosition": ""
        }
    }
);

// 监听视频结束事件，确保复杂场景下播放完成后稳定暂停
myFP.videoElement.addEventListener('ended', function() {
    myFP.pause();
});
</script>

补充说明 #

默认情况下，视频播放结束后会进入暂停状态，但在包含前置广告等场景中，额外添加ended事件监听可以避免意外的自动播放行为，确保需求稳定生效。

内容的提问来源于stack exchange，提问作者david David