微信小程序Video组件实现视频倍速播放

最新推荐文章于 2024-08-06 20:18:55 发布

逆风前行的小强

最新推荐文章于 2024-08-06 20:18:55 发布

阅读量3.8w

点赞数 3

分类专栏： Web前端

本文链接：https://blog.csdn.net/dengchenrong/article/details/88417117

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何在微信小程序中利用Video组件的playbackRate API实现视频的倍速播放功能。根据官方文档，支持0.5、0.8、1.0、1.25和1.5倍速播放。并提供了一个简单的DEMO，包括wxml和js代码示例，演示了创建播放器和设置播放速度的基本步骤。注意，未创建并绑定播放器会导致运行时错误。此示例仅实现了基础功能，样式部分需开发者自行设计。

摘要由CSDN通过智能技术生成

要在小程序中实现视频倍速播放功能，在微信小程序api开发文档中有描述：
https://developers.weixin.qq.com/miniprogram/dev/api/VideoContext.playbackRate.html?search-key=rate，
支持05/0.8/1.0/1.25/1.5倍率
在这里插入图片描述

下面整个demo:
https://developers.weixin.qq.com/s/w5mgzamw7454

1、wxml 在这里插入图片描述

wxml源码

<view class="mod_action">
  <button bindtap="bindButtonRate" data-rate='0.5'>倍速0.5</button>
    <button bindtap="bindButtonRate" data-rate='1'>倍速1</button>
    <button bindtap="bindButtonRate" data-rate='1.5'>倍速1.5</button>
  </view>

2、js
在这里插入图片描述
3、创建播放器，缺少这一步会报以下错误

报错的原因就是没有创建绑定播放器，但是在js中调用了playbackRate的方法
效果：
只是实现基本功能，样式就自行发挥了。