adfasdfasd 2024-08-22 12:27 采纳率: 20%
浏览 8

JW player怎么实现播放完成前5秒弹出窗口

JW player 6.6 ，播放完弹出窗口能实现，现在想要在播放完成前五秒弹窗，请问能否实现？谢谢。

附上源文件，注意：请下载文件修改，看实际能不能实现。所以麻烦各位一定下载文件进行修改测试，谢谢大家

文件见 链接: https://pan.baidu.com/s/1DHPVXbGsMp11h0rJMt4Pdw 提取码: 52pj 复制这段内容后打开百度网盘手机App，操作更方便哦

但请上传完整文件到网盘，谢谢了

  • 写回答

1条回答 默认 最新

  • 吃不了席 2024-08-22 18:43
    关注

    以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

    要实现在 JW Player 播放完成前5秒弹出窗口，可以使用 JW Player 的 API 来实现。首先，需要在 HTML 文件中引入 JW Player 的 JavaScript 文件，然后在 JavaScript 代码中创建一个 JW Player 实例，并监听 timeupdate 事件。当播放时间接近视频总时长减去5秒时，显示弹窗。

    以下是一个简单的示例：

    1. 下载并解压提供的链接中的文件，找到其中的 index.html 文件。

    2. 在 index.html 文件中，添加以下代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JW Player Popup Example</title>
    <script src="https://cdn.jwplayer.com/6.6/jwplayer.js"></script>
</head>
<body>
    <div id="my-video"></div>
    <div id="popup" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color:white; padding:20px; border:1px solid black;">
        这是一个弹窗！
    </div>
    <script>
        var player = jwplayer("my-video");
        player.setup({
            file: "path/to/your/video.mp4",
            width: 640,
            height: 360
        });

        player.onTime(function(event) {
            var remainingTime = player.getDuration() - event.position;
            if (remainingTime <= 5) {
                document.getElementById("popup").style.display = "block";
            } else {
                document.getElementById("popup").style.display = "none";
            }
        });
    </script>
</body>
</html>

    注意将 file 属性的值替换为你的视频文件的实际路径。

    这个示例中，我们创建了一个名为 popup 的弹窗，初始状态为隐藏。然后，我们监听 JW Player 的 timeupdate 事件，当剩余播放时间小于等于5秒时，显示弹窗。

    评论

报告相同问题？

问题事件

  • 创建了问题 8月22日

悬赏问题

  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见
  • ¥15 一共有五道问题关于整数幂的运算还有房间号码 还有网络密码的解答？(语言-python)
  • ¥20 sentry如何捕获上传Android ndk 崩溃
  • ¥15 在做logistic回归模型限制性立方条图时候，不能出完整图的困难
  • ¥15 G0系列单片机HAL库中景园gc9307液晶驱动芯片无法使用硬件SPI+DMA驱动，如何解决？