微信小程序中播放视频例子

最新推荐文章于 2024-04-20 03:47:57 发布

liyan882

最新推荐文章于 2024-04-20 03:47:57 发布

阅读量1.3k

点赞数

分类专栏：微信小程序文章标签：微信小程序 typescript javascript

本文链接：https://blog.csdn.net/u014077467/article/details/125213273

版权

微信小程序专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、wxml中

<!-- ====== 课时视频播放区 start ====== -->
<text class="video_title">{{currentVideo.video_title}}</text>
<view class="playArea">
  <video enable-play-gesture="{{true}}" bindended="videoEnded" object-fit="cover" custom-cache="{{false}}" id="myVideo" src="{{currentVideo.videoUrl}}" >
    <!-- 视频封面 start-->
    <cover-view class="video_cover" wx:if="{{play_flag!=0}}">
      <cover-view class="play_mask" catchtap="bindPlay">
        <cover-image class="play_btn" src="{{offlineImgUrl}}playbtn.png"></cover-image>
      </cover-view>
      <cover-image class="video_cover_img" src="{{offlineImgUrl + currentVideo.courseCover}}" mode="heightFix"></cover-image>
    </cover-view>
    <!-- 视频封面 end-->
  </video>
</view>
<!-- ====== 课时视频播放区 end ====== -->

<!-- ====== 课时视频tab切换 start ====== -->
<scroll-view class="video_tab" scroll-x>
  <view class="video_tab_item {{currentItem==item.id?'active':''}}" wx:for="{{courseVideoData}}" wx:key="id" catchtap="checkVideo" data-video-info="{{item}}">
    <view class="video__small_mask"></view>
    <image src="{{offlineImgUrl + item.courseCover}}" mode="heightFix"></image>
  </view>
</scroll-view>
<!-- ====== 课时视频tab切换 end ====== -->

2、js中
首先在onReady中获取视频容器 this.videoContext = wx.createVideoContext(“myVideo”);
如果在组件中 this.videoContext = wx.createVideoContext(‘myVideo’,this);这样获取

data: {
  courseVideoData: [], //我的视频列表数据
  play_flag: -1,//默认显示视频封面  -1显示  0不显示
  currentVideo: {},//播放区视频  默认第一个
  currentItem:'' //底部默认选中的视频添加样式
},

/*
 *@Description: 获取数据列表
 *@MethodAuthor: LiJuncai
 *@Date: 2022-06-08 22:25:07
*/
getList() {
  this.setData({
    courseVideoData: testData,//课程视频列表数据赋值
    currentVideo: testData[0],//播放去区视频  默认第一个
    currentItem: testData[0].id//底部选中视频  默认第一个
  })
},

/**
 * 生命周期函数--监听页面初次渲染完成
 */
onReady() {
  this.videoContext = wx.createVideoContext("myVideo");
},

/*
  *@Description: 点击选择播放课程
  *@MethodAuthor: LiJuncai
  *@Date: 2022-06-08 22:24:39
 */
checkVideo: function (e) {
 let videoInfo = e.currentTarget.dataset["videoInfo"];//获取点击视频信息
 var id = e.currentTarget.dataset.id;
 console.log(e);
 this.setData({
   currentVideo: videoInfo,//将点击视频信息赋值给播放区
   play_flag: -1,//显示视频封面
   currentItem: videoInfo.id //设置当前视频样式
 });
 this.videoContext.pause();//暂停视频
},

/*
 *@Description: 点击播放视频
 *@MethodAuthor: LiJuncai
 *@Date: 2022-06-08 22:24:25
*/
bindPlay() {
  this.setData({
    play_flag: 0
  });
  this.videoContext.play();
},