原生js与微信小程序 控制<video>标签 视频播放倍率

最近公司小程序有个需求 要求里面的视频可以让用户控制播放的倍率
需求很简单 但是要注意 在不同终端上 写法可能有些许区别
这里大家主要关注js的部分

原生js
html部分

<div id="box">
   <video id="myVideo" style="width: 100%;" controls
     src="https://cdrbonlinecourse.cdrb.com.cn/upload/mp4/171400903680674433667.mp4"></video>
   <div>
     请选择视频倍率：
     <div class="speed">
       <span onclick="changeSpeed(0.5)">0.5x</span>
       <span onclick="changeSpeed(1)">1x</span>
       <span onclick="changeSpeed(1.5)">1.5x</span>
       <span onclick="changeSpeed(2)">2x</span>
     </div>
   </div>
 </div>

js部分

function changeSpeed (speed) {
      let myVideo = document.getElementById('myVideo')
      myVideo.playbackRate = speed
    }

原生微信小程序
wxml部分

<view class="videoplay">
      <view>视频播放速率：</view>
      <view class="videoPlaySpeedBox">
        <view class="videoplayspeed {{videoSpeed == 0.5 ? 'selectSpeed' :''}}" data-speed="0.5" bindtap="switchVideoSpeed">0.5x</view>
        <view class="videoplayspeed {{videoSpeed == 1 ? 'selectSpeed' :''}}" data-speed="1" bindtap="switchVideoSpeed">1x</view>
        <view class="videoplayspeed {{videoSpeed == 1.5 ? 'selectSpeed' :''}}" data-speed="1.5" bindtap="switchVideoSpeed">1.5x</view>
        <view class="videoplayspeed {{videoSpeed == 2 ? 'selectSpeed' :''}}" data-speed="2" bindtap="switchVideoSpeed">2x</view>
      </view>
    </view>

js部分

switchVideoSpeed:function(e){
    var video = wx.createVideoContext('myVideo');  
    video.playbackRate(Number(e.target.dataset.speed)); // 设置播放速度
    this.setData({
      videoSpeed : e.target.dataset.speed
    })
  }

当然 原生的都会写了 vue自然也就不在话下了哈 我这里就不写了
本人写这篇文章的目的是记录 方便以后需要的时候直接用