开发者社区> 问答> 正文

在视频点播中,已经在canplay事件写了player.play() 但是没有效果怎么办?

在视频点播中,已经在canplay事件写了player.play() 但是没有效果 看起来是因为微信拦截了视频的自动播放 实践中有什么解决方案么?

展开
收起
乐天香橙派 2023-10-07 16:40:20 130 0
7 条回答
写回答
取消 提交回答
  • 月移花影,暗香浮动

    楼主您好,您可以尝试使用以下解决方案:

    1. 在视频点播的初始化参数中,将autoplay设置为true,这样视频就会自动播放。
    2. 在视频点播的初始化参数中,将muted设置为false,这样视频就不会静音播放。
    3. 在视频点播的初始化参数中,将theme-color设置为透明,这样视频就不会有主题颜色。
    4. 如果以上方法都不行,您可以尝试使用阿里云的视频点播播放器进行播放。
    2023-10-08 11:17:58
    赞同 展开评论 打赏
  • 是的,微信对视频的自动播放有严格的限制,您需要在满足其条件的情况下,才能使用自动播放功能。微信规定,视频的自动播放需要满足以下条件:

    1. 视频的长度不超过30秒;
    2. 视频的大小不超过200KB;
    3. 视频的编码格式必须是MP4。

    如果您想要在视频点播中使用自动播放功能,可以按照以下步骤操作:

    1. 首先,您需要检查视频的长度和大小是否符合微信的规定。如果不符合,您需要调整视频的长度和大小。
    2. 然后,您需要检查视频的编码格式是否为MP4。如果不是,您需要将视频转换为MP4格式。
    3. 最后,您可以在canplay事件中添加player.play()方法,以启动视频的自动播放。

    另外,您还可以使用微信的JSSDK中的startRecord方法,将视频上传到微信服务器,然后使用微信的JSSDK中的startVideoPlayback方法,从微信服务器上播放视频。这样,即使微信拦截了视频的自动播放,用户也可以通过点击播放按钮来播放视频。

    2023-10-08 09:26:02
    赞同 展开评论 打赏
  • 是的,微信等一些浏览器会拦截视频的自动播放,这是为了保护用户隐私和减少不必要的流量消耗。如果在视频点播中,已经在canplay事件中写了player.play()但是没有效果,可能是由于微信的自动播放拦截导致的。
    解决这个问题的一种方法是在video标签中添加autoplay属性,将autoplay设置为true,以允许视频自动播放。例如:

    <video id="myVideo" src="myVideo.mp4" autoplay></video>
    

    但是,这种方法可能会导致视频在页面加载时立即开始播放,这可能会对用户体验产生影响。因此,建议您在页面加载时,首先检查用户是否已经授予了播放视频的权限。如果用户没有授予播放视频的权限,您可以提示用户授予播放视频的权限,然后再播放视频。
    例如,您可以使用HTML5的MediaQuery API来检查用户是否已经授予了播放视频的权限。如果用户没有授予播放视频的权限,您可以提示用户授予播放视频的权限,然后再播放视频。例如:

    var mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
    if (mediaQuery.matches) {
      alert("为了更好的播放体验,建议您开启浏览器的自动播放功能。");
    } else {
      // 如果用户已经授予了播放视频的权限,就播放视频
      document.getElementById("myVideo").play();
    }
    
    2023-10-08 09:26:02
    赞同 展开评论 打赏
  • 在微信环境中,由于安全性和隐私的考虑,微信确实会拦截视频的自播。但是,你可以通过一些方法来绕过这个限制。以下是一些可能的解决方案:

    1. 前贴片广告:在视频播放之前插入一个广告,然后当广告播放完毕时,再触发视频的播放。这样,用户就需要观看广告,从而增加了广告的曝光率。

    2. 用户确认播放:在 canplay 事件后,弹出一个小窗口询问用户是否确认播放。如果用户点击确认,则开始播放视频;如果用户点击取消,则停止播放。

    3. 利用插件或第三方服务:有些第三方插件或服务可以帮助你在微信环境中实现视频的自动播放。例如,有一些视频播放器插件提供了在微信环境下实现自动播放的功能。

    4. 优化页面性能:提高页面的加载速度和使用体验,减少用户的反感,从而提高视频的播放率。

    5. 使用图片和视频混合展示:将视频和图片混合展示,让用户可以通过点击图片来播放视频。

    2023-10-08 08:49:27
    赞同 展开评论 打赏
  • 北京阿里云ACE会长
    1. 监听 video 标签的 play 事件,而不是 canplay 事件。当视频可以播放时,用户手动点击播放按钮。这样,微信就不会拦截视频的自动播放。

    const videoElement = document.querySelector('video');
    videoElement.addEventListener('play', () => {
    // 视频已经开始播放
    });
    CopyCopy

    1. 使用 setTimeout 模拟人工点击播放按钮。在 canplay 事件中,设置一个定时器,当定时器超时时,执行 player.play()。这样,在定时器超时之前,微信可能不会拦截视频的自动播放。

    const videoElement = document.querySelector('video');
    videoElement.addEventListener('canplay', () => {
    setTimeout(() => {
    player.play();
    }, 1000); // 设置一个 1 秒的定时器
    });
    CopyCopy

    1. 尝试使用微信官方提供的视频播放器。在微信中,可以使用 wxparse 或者 wxvideo 这样的库来解析和播放视频。这样,您就不需要使用浏览器原生的 video 标签,从而避免微信拦截视频的自动播放。
    2023-10-08 07:37:54
    赞同 展开评论 打赏
  • 通过交互事件来触发播放:在canplay事件中,不直接调用player.play(),而是监听用户的某个交互事件,比如点击、滑动等,当用户进行了特定的交互动作后再调用player.play()来开始播放视频。

    2023-10-08 07:37:54
    赞同 展开评论 打赏
  • 可以试试静音再播放。setVolume(0)
    —此回答来自钉群“阿里云-VOD-视频点播-技术交流(进群先看公告)”

    2023-10-07 17:06:06
    赞同 展开评论 打赏
滑动查看更多
问答分类:
问答标签:
来源圈子
更多
收录在圈子:
+ 订阅
问答排行榜
最热
最新

相关电子书

更多
互联网音视频点播业务云上实践 立即下载
《VoD问题排查与实战手册》 立即下载
低代码开发师(初级)实战教程 立即下载