微信小程序开发—(十六)video视频播放

待我称王封你为后i 2021-09-12 07:06 665阅读 0赞

一.知识点

1.video

![20170517134647848][]

video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。

2.wx.createVideoContext(videoId)：创建并返回 video 上下文 `videoContext` 对象

videoContext：`videoContext` 通过 videoId 跟一个 video 组件绑定，通过它可以操作一个 video 组件。

![20170517135413515][]

二.操作

1.视频播放：发送弹幕

wxml

<view class="section"> <video id="myVideo" src="{ {src}}" danmu-list="{ {danmuList}}" enable-danmu danmu-btn controls></video> <view class="btn-area"> <button type="primary" bindtap="videoPlay">播放</button> <button type="primary" bindtap="videoPause">暂停</button> <input bindblur="bindInputBlur" placeholder="请输入弹幕内容"/> <button bindtap="bindButtonTap">获取视频</button> <button bindtap="bindSendDanmu">发送弹幕</button> </view> </view>

js

var util = require('../../utils/util.js') function getRandomColor () {//随机获取颜色 let rgb = [] for (let i = 0 ; i < 3; ++i){ let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color rgb.push(color) } return '#' + rgb.join('') } Page({ onReady: function (res) { this.videoContext = wx.createVideoContext('myVideo');//获取上下文 }, inputValue: '', data: { src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload? filekey=30280201010421301f0201690402534804102ca905ce620b1241b72 6bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c0 20101042530230204136ffd93020457e3c4ff02024ef202031e8d7f020 30f42400204045a320a0201000400', danmuList: [ { text: '第 1s 出现的弹幕', color: '#ff0000', time: 1 }, { text: '第 3s 出现的弹幕', color: '#ff00ff', time: 3 }] }, //播放 videoPlay:function(){ this.videoContext.play(); }, //暂停 videoPause:function(){ this.videoContext.pause(); }, //写弹幕 bindInputBlur: function(e) { this.inputValue = e.detail.value },//获取视频 bindButtonTap: function() { var that = this wx.chooseVideo({ sourceType: ['album', 'camera'], maxDuration: 60, camera: ['front','back'], success: function(res) { that.setData({ src: res.tempFilePath }) } }) }, //发送弹幕 bindSendDanmu: function () { this.videoContext.sendDanmu({ text: this.inputValue, color: getRandomColor() }) } })

![20170517114458146][]

2.监听视频加载错误状态

![20170517135114717][]

<button bindtap="listenerButton">点击显示视频组件</button>  <video src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4" style="width: 100%; height: 100%" hidden="{ {hiddenVideo}}" binderror="listenerVideo" />

Page({ data:{ // text:"这是一个页面" hiddenVideo: true }, /** * 监听视频加载错误状态 */ listenerVideo:function(e) { console.log(e.detail.errMsg); }, /** * 监听button点击事件 */ listenerButton:function() { this.setData({ hiddenVideo: !this.data.hiddenVideo }) } })

[20170517134647848]: /images/20210813/94b68443b461413b8a607c7ecc325d78.png
[20170517135413515]: /images/20210813/f76c6e113b0e4628b67ec62bb0726ddd.png
[20170517114458146]: /images/20210813/4cb0e2332a564b2d91cf0cf453232c67.png
[20170517135114717]: /images/20210813/380ea6359b3948c08f523a32c9a3da32.png

发表评论取消回复

表情：

评论列表（有 0 条评论，665人围观）

还没有评论，来说两句吧...

相关阅读

相关微信html视频直接播放用画布,小程序丨教你：如何使用微信小程序video组件播放视频（附源码）...

教你小程序系列教程： 1.教你：微信小程序如何实现scroll-view隐藏滚动条 2.教你：如何使用scroll-view组件实现视图垂直滚动(附源码) 3.教你：小程

妖狐艹你老母/ 2022年10月06日 12:48/ 0 赞/ 125 阅读

相关微信小程序音频播放

今天做微信小程序涉及到播放音频文件： ![Center][] 使用audio标签来绑定音频路径 <audio id='audioid' src='{

野性酷女/ 2022年06月08日 09:50/ 0 赞/ 320 阅读

相关【微信小程序】video视频组件问题

1、 video 封面poster图片在真机IOS下会被撑大，不自适应。必须按照比例返回固定比例图片大小的图片，这个在不同机型上很难办到 2、seek(0)以后，再pause

朱雀/ 2022年06月04日 02:48/ 0 赞/ 917 阅读

相关 video视频播放

作者：LoveEmperor-王子様 > 更多资料：[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/vi

曾经终败给现在/ 2022年05月16日 01:55/ 0 赞/ 341 阅读

相关微信小程序抖音实战-支持手机播放小视频

> 上一篇抖音播放小视频文章发出来后很多的粉丝纷纷留言问为什么手机不能用呀！ > 小编也是试了诸多方法，最后把经验总结出来给大家做了一个改进的例子 IT实战联盟博客：[h

Myth丶恋晨/ 2022年05月15日 02:43/ 0 赞/ 323 阅读

相关微信浏览器视频小窗播放微信网页

<video src="" controls="" x5-playsinline="" playsinline="" webkit-playsinline="" poster=

柔光的暖阳◎/ 2021年11月05日 21:06/ 0 赞/ 444 阅读

相关微信小程序开发—(十六)video视频播放

一.知识点 1.video ![20170517134647848][] video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和heig

待我称王封你为后i/ 2021年09月12日 07:06/ 0 赞/ 666 阅读

相关微信小程序开发—(十五)audio音频播放

一.知识点（1）.audio为音频组件，我们可以轻松的在小程序中播放音频。 ![20170517102532617][] [整理下就是：][Link 1]

向右看齐/ 2021年09月12日 07:06/ 0 赞/ 1591 阅读

相关微信小程序开发—(六)录音

请注意，请注意，请注意：重要的事情要说三遍。初学小程序的菜鸟们，录音功能在开发工具是没有反应，会一直提示录音失败，所以菜鸟们不要浪费更多的时间：研究为什么总是失

小灰灰/ 2021年09月12日 06:20/ 0 赞/ 300 阅读

相关微信小程序 video 视频组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 视频（v2.4.0 起支持[同层渲染][Link 1]）。相关api：[wx.createVid

绝地灬酷狼/ 2021年09月08日 06:28/ 0 赞/ 1030 阅读