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

待我称王封你为后i 2021-09-12 07:06 762阅读 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 条评论，762人围观）

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

相关阅读

相关微信小程序video组件播放腾讯视频等热门视频

腾讯视频的链接地址打开的页面，没有视频文件的地址，怎么在video组件中播放呢。这个需要对链接和页面做一些特别的处理，才能调取视频文件，进行视频播放。热门的还...

末蓝、/ 2024年04月17日 21:28/ 0 赞/ 101 阅读

相关在线学习小程序,微信小程序视频播放,小程序毕业设计

> 项目背景和意义目的：本课题主要目标是设计并能够实现一个基于微信小程序视频点播系统，前台用户使用小程序，后台管理使用基java（springboot框架）+msyql

小灰灰/ 2024年04月01日 14:01/ 0 赞/ 86 阅读

相关 H5 video播放视频，微信内小窗播放

腾讯对微信尤其是安卓版本的内置浏览器内核做了一点点小处理，在X5内核下，播放会强制全屏，如果需要进行边视频边互动下则无法实现。无论使用百度或者是科学上网google都没有解

浅浅的花香味﹌/ 2023年10月11日 12:19/ 0 赞/ 53 阅读

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

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

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

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

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

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

相关 video视频播放

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

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

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

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

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

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

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

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

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

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

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

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

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

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