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

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();
},

微信小程序中播放视频例子相关推荐

微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签前言萤石云开放平台微信开发者工具前言因为项目需要在微信小程序上展示实时视频流信息,以下内容是我将萤石云平台官方文档和自己实 ...
使用Filler4提取微信小程序中的视频
因为需要做防范电信网络诈骗的宣传,但是相关视频网站的内容都不适合宣传使用,最后在微信小程序搜索到一些合适的内容,但是微信小程序的视频不能直接下载,就考虑通过获得文件地址直接下载. 1.机器环境系统: ...
教你如何用手机下载视频号[微信小程序]中的视频
** 如何下载微信视频号**[微信小程序]**中的视频 ** 事情是这样的,因为近期所在工作单位要迎接检查,老板发了几个小程序视频给我,需要我把他下下来,我最初找了一下,并不能够找到下载按钮,就打算改 ...
下载微信小程序中的视频
工具准备: Fiddler 我这里用的5.0的版本.(这个用来抓取视频下载地址) Internet Download Manager(idm)版本6.37(这个用来下载视频) 步骤: 打开Fiddle ...
微信小程序入门:在小程序中播放视频和发送弹幕
<移动软件开发>实验3 实验介绍: **本实验来自于周文洁老师的<微信小程序开发实战>第六章.**主要内容是使用小程序媒体API制作一个视频播放小程序,视频素材来自于某高校档案 ...
IOS端微信小程序API播放视频无效，应该这样做
微信小程序 IOS端通过API播放视频无效需求微信小程序项目中需求点击"播放"按钮,直接开始播放视频问题直接调用微信API操作视频播放,Adroid端运行一切正常,IOS端 ...
【uniapp】微信小程序中的视频下载和分享、PDF下载和分享、完整下载（图片、视频、各种文件）
目录一.视频的下载二.视频的分享三.PDF下载和分享四.完整五.有可能是坑一.视频的下载先使用uni.downloadFile将文件下载到将远程文件下载到小程序内存中,然后使用uni.s ...
微信小程序涉及播放视频解决办法（证书or腾讯视频插件）
随着小程序越来越活,很多商家都开始开发自己的小程序啦,最近新的版本需求是在页面添加视频播放,视频是上传到自己的服务器的但是一提交审核之后.无数的问题接踵而至证书还是在申请中的但是怎么办看看其他的 ...
微信小程序列表播放视频播放当前视频上一个暂停
一身正气,浪荡自由.  <!-- <text>pages/classific ...
微信小程序 Video 播放视频,宽高设置
1. wxml文件 <view class="section"><video class= "videoCss" src='{{url}}' ...

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

微信小程序中播放视频例子相关推荐

最新文章

热门文章

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

微信小程序中播放视频 例子相关推荐

最新文章

热门文章

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

微信小程序中播放视频例子相关推荐