iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >微信小程序——video视频播放
  • 178
分享到

微信小程序——video视频播放

音视频小程序微信小程序微信前端 2023-09-13 19:09:11 178人浏览 泡泡鱼
摘要

1、功能介绍 可以实现视频的播放暂停,发送弹幕,获取视频所处位置等。 2、video组件 1、用处 video组件常用于视频的播放,默认宽度为300px,高度为225px。 2、属性       3、index.js中的数据部分 data:

1、功能介绍

可以实现视频的播放暂停,发送弹幕,获取视频所处位置等。

2、video组件

1、用处

video组件常用于视频的播放,默认宽度为300px,高度为225px。

2、属性 

 

 

 3、index.js中的数据部分

data: {    src:"Http://localhost:3000/1.mp4",    danmuList:[      {text:'first',color:'#ff0000',time:1},      {text:'second',color:'#008080',time:2},      {text:'three',color:'#ff00ff',time:3}    ]  },

4、结构布局index.wxml

5、样式部分index.wxss

video{  width: 100vw;}input{  border: 1rpx  solid #ccc;  margin: 20rpx;}button{  background-color: rgb(76, 250, 114);}button{  margin-bottom: 10rpx;}

6、弹幕实现功能

 videoContext:null,  inputValue:'',  onReady:function(){    this.videoContext=wx.createAudiocontext('myVideo')  },  bindInputBlur:function(e){    this.inputValue=e.detail.value  }, bindSendDanmu: function () {    this.videoContext.sendDanmu({      text: this.inputValue,      color: "#f90"    })  },

创建的videoContent对象,用于对video组件进行控制

 7、获取视频功能

bindButtonTap:function(){    wx.chooseVideo({      sourceType:['album','camera'],      maxDuration:60,      camera: 'back',      success:res=>{        this.setData({          src:res.tempFilePath        })      }    })  }

         

来源地址:https://blog.csdn.net/xybhua/article/details/128913011

--结束END--

本文标题: 微信小程序——video视频播放

本文链接: https://www.lsjlt.com/news/406302.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序——video视频播放
    1、功能介绍 可以实现视频的播放暂停,发送弹幕,获取视频所处位置等。 2、video组件 1、用处 video组件常用于视频的播放,默认宽度为300px,高度为225px。 2、属性       3、index.js中的数据部分 data:...
    99+
    2023-09-13
    音视频 小程序 微信小程序 微信 前端
  • 微信小程序之video组件视频播放
    目录1、功能介绍2、video组件2.1、用处2.2、属性3、index.js中的数据部分4、结构布局index.wxml5、样式部分index.wxss6、弹幕实现功能7、获取视频...
    99+
    2024-04-02
  • 微信小程序使用视频播放器video组件
    本文实例为大家分享了微信小程序使用视频播放器video组件的具体代码,供大家参考,具体内容如下 在app.json中配置好页面路由和权限。 1.app.json { "pag...
    99+
    2024-04-02
  • 微信小程序如何停止其他视频播放当前视频
    这篇文章主要介绍了微信小程序如何停止其他视频播放当前视频,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序停止其他视频播放当前视频,代...
    99+
    2024-04-02
  • 微信小程序中怎么集成视频播放器
    要在微信小程序中集成视频播放器,可以使用小程序原生的<video>组件来实现。 首先,在小程序的wxml文件中添加<...
    99+
    2024-04-03
    微信小程序
  • 微信小程序实现播放音频
    本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下 wxml: <!-- 语音 --> <view wx:if="{{content...
    99+
    2024-04-02
  • 微信小程序实现视频播放器发送弹幕
    本文实例为大家分享了微信小程序实现视频播放器发送弹幕的具体代码,供大家参考,具体内容如下 一、视频播放器 video-detail 视频播放器 select-col...
    99+
    2024-04-02
  • 微信小程序视频组件库video怎么使用
    这篇文章主要讲解了“微信小程序视频组件库video怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序视频组件库video怎么使用”吧!video视频。属性名类型默认值说明最低版...
    99+
    2023-06-26
  • 微信小程序怎么实现播放音频
    这篇文章主要介绍“微信小程序怎么实现播放音频”,在日常操作中,相信很多人在微信小程序怎么实现播放音频问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序怎么实现播放音频”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-19
  • 微信小程序实现播放音频功能
    本文实例为大家分享了微信小程序实现播放音频的具体代码,供大家参考,具体内容如下 功能描述:一进页面就会播放音乐,点击暂停再次点击后可以开始播放,退出页面后播放停止。 HTML: &l...
    99+
    2024-04-02
  • 微信小程序实现视频播放器发送弹幕的方法
    这篇文章主要介绍了微信小程序实现视频播放器发送弹幕的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、视频播放器video-detail 视频播放器select-colo...
    99+
    2023-06-14
  • 怎么使用微信小程序实现播放音频
    这篇“怎么使用微信小程序实现播放音频”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用微信小程序实现播放音频”文章吧。w...
    99+
    2023-07-02
  • 实现微信小程序中的音频播放功能
    标题:实现微信小程序中的音频播放功能微信小程序作为一种快速便捷的应用开发平台,为开发者提供了众多丰富的功能。在小程序中,音频播放功能是非常常见且重要的需求之一。本文将介绍如何在微信小程序中实现音频播放功能,并提供具体的代码示例。一、准备工作...
    99+
    2023-11-21
    音频播放 微信小程序 实现功能
  • Mac视频播放器Elmedia Video Player for Mac
    Elmedia Video Player for Mac是适用于Mac OS的媒体播放器。它可以播放几乎任何文件类型,无论是AVI,MP4,FLV,WMV,MKV,MP3,M4V等.Elmedia Video Player是一体化解决方案,...
    99+
    2023-06-05
  • 基于PHP微信小程序视频电影播放系统设计与实现
    开发概要 开发操作系统:windows10 + 4G内存 + 500G 小程序开发:微信开发者工具(MINA框架) 后台环境:IIS +PHP 后台开发语言:PHP 后台开发工具:Dreamweaver +PhpStor...
    99+
    2023-08-31
    php 微信小程序 前端 Powered by 金山文档
  • 微信小程序实现录音与音频播放功能
    目录1、录音1.1 案例2、音频播放控制2.1 案例小程序继承了微信强大的语音处理功能,提供了录音、音频播放控制和背景音乐等功能,它们的功能不同,但有相似性。 1、录音 小程序提供了...
    99+
    2024-04-02
  • Mac视频播放器Elmedia Video Player Pro Mac
    Elmedia Video Player for Mac是Mac平台上一款能够为您播放各种文件类型的万能视频播放器,您可以用Elmedia Video Player Mac版进行flash、silverlight、wmv、real以及所有常...
    99+
    2023-06-06
  • html5中video如何停止播放视频
    这篇文章主要介绍html5中video如何停止播放视频,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!html5 video停止播放视频的方法:首先使用“document.getElementById("id...
    99+
    2023-06-15
  • 微信视频点播小程序系统设计与实现
        项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序视频点播系统,前台用户使用小程序,后台管理使用基java(springboot框架)+msyql8数据库的B/S架构;通过后台添加课程信息、视频信息...
    99+
    2023-09-01
    java 开发语言
  • 微信小程序播放背景音乐
    1.实现效果 2.实现原理 1、wx.getBackgroundAudioManager : 获取全局唯一的背景音频管理器。 小程序切入后台,如果音频处于播放状态,可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。 从微信客...
    99+
    2023-09-20
    微信小程序 小程序
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作