uniapp 使用腾讯视频的坑

最新推荐文章于 2024-07-31 10:29:37 发布

大坤...

最新推荐文章于 2024-07-31 10:29:37 发布

阅读量1.2k

点赞数 1

文章标签： uni-app java 前端

本文链接：https://blog.csdn.net/red_HTML/article/details/132346888

版权

本文提醒读者注意腾讯视频小程序插件的版本更新，1.X版本已停止维护，需升级至2.X。同时，官方组件事件处理方法需移除bind前缀。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 版本号的问题注意 1.X.X不维护了，需要升级要 2.X.X

2. 官网的组件事件调用需要去掉bind 才能调用

官网地址：腾讯视频 | 小程序插件 | 微信公众平台

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大坤...

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

高级前端工程师

05-15

1万+

uniapp腾讯视频，uniapp微信小程序腾讯视频，uniapp小程序接入腾讯视频详细示例教程源码，uniapp怎么在微信小程序平台使用腾讯视频插件，在uni-app中使用腾讯视频插件播放视频，uniapp调用腾讯视频，uniapp引入腾讯视频插件，uniapp小程序中引入腾讯视频无法播放，uniapp微信小程序平台引入腾讯视频播放不了黑屏，在uniapp开发的微信小程序中使用腾讯视频，uniapp如何引入腾讯视频插件播放视频，uni-app小程序平台引入腾讯视频插件播放腾讯视频，uniapp 小程序接入

运用renderjs和腾讯云点播实现视频的播放和手势控制。（1）

華勳的博客

08-16

959

这里提一下，如果想通过vuex来实现共享是行不通的，具体的坑是在vue的this指向的实例化对象问题，只能获取到原始数据而无法获取到更新后数据，这里就不展开了。这里先告诉大家，直接把元素写到页面结构中的方法是行不通的，具体原因后面分析，用到的仍然是vue的render函数，也就是操作虚拟dom，由于篇幅有限，下面的内容将写到下一节中。如果对于renderjs不熟悉的可以移步uniapp的官方文档，虽然官方文档对于renderjs的描述也是寥寥数语，但是结合我下面的代码你就会明白的。......

参与评论您还未登录，请先登录后发表或查看评论

在uni-app中使用腾讯视频插件播放视频

程序猿零壹的博客

06-22

9182

在小程序里播放视频是很常见的功能。在本文里，我们来看一看怎么在微信小程序里开发一个播放视频的功能。本文将使用uni-app+腾讯视频来实现。

腾讯云点播视频播放器使用步骤 uniapp

清砾的博客

10-27

4298

微信开发后台首先需要微信小程序的账号，各种认证，信息填写完整，然后–>设置–>第三方设置–>插件管理–>添加插件–>搜索云点播短视频播放器–>添加插件项目开发在page.json文件中的globalStyle下面加入 "usingComponents": { // #ifdef MP-WEIXIN "my-player": "plugin://myPlugin/player" // #endif } 在manifest.json

uniapp 利用腾讯播放器开发视频功能，App版

nelly521的博客

09-25

947

【代码】uniapp 利用腾讯播放器开发视频功能，App版。

uniapp插件-腾讯云播放器sdk插件-腾讯云高清播放器-多码率支持-截图-播放控制-变速播放

一颗优雅草科技-央千澈的CSDN博客~只想无穷无尽的学习~作息早8-晚8

02-07

1452

目前仅做了安卓版本，如果需求量可以的话我们会制作IOS版本的。使用方法：腾讯云播放器腾讯云目前是免费的，后期不知道，需要注册请访问腾讯云官网，优雅草伙伴注册链接：点击访问腾讯云官网关联优雅草科技可提供支持。 <TXPlay ref="txplay" class="m-video" :param="param" ></TXPlay> <TXPlay ref="txplay" class="m-video" :param="param2"

Uniapp学习心得体会

m0_66085294的博客

06-24

404

比如，我们可以使用微信开发者工具来调试Uniapp中的小程序，在H5端上，我们也需要了解不同的浏览器调试工具。如前所述，Uniapp自带一些基本的UI组件，但是，针对某些应用需求，我们可能需要更丰富的UI组件。在Uniapp中，我们可以使用flexbox和grid来实现不同的布局，并使用不同的CSS样式来加强应用程序的可视化效果。通过不断地学习和实践，我们可以更好地掌握Uniapp的使用，构建出高质量的应用程序。Uniapp的学习需要不断地实践，这能够帮助我们更好地掌握Uniapp的基本用法。

小程序项目如何设置资源的防盗链？

画漫画的程序员∙苏南

11-26

2540

做过前端，或对小程序有些了解的同学都知道，小程序是没有域名访问概念的，访问的路径都是以：“/pages/index”、“/pages/my”这种方式进行页面跳转的。域的概念从何而来？于是在项目中，把Network面板的信息看了又看，查看Headers信息，看到Referer这里有一个没见过的域名把整个页面请求头，百度搜索无果，最后还是谷歌告诉我，小程序也是有个域名的，最后设置了防盗链

微信小程序播放m3u8视频总结

最新发布

weixin_47132111的博客

07-31

1154

2. 在pages.json文件下找到需要引入腾讯视频插件页面配置。需要再手机预览或者真机调试才能播放，微信开发者工具播放不成功。只需要更换vid，vid就是视频id。引入成功会在微信开发者工具中看到。1. 引入腾讯视频插件。

uniapp 使用 mui-player 插件播放 m3u8/flv 视频流

一步一个脚印，踏实努力，向着目标前进

08-23

7145

请注意，以上方法中的视频流地址需要确保有效性和可访问性，并根据需要进行样式和功能的自定义。另外，uni-mpvue-player和uni-video插件的具体使用方法和配置请参考插件的文档，原生小程序组件的使用方法请参考小程序开发文档。以上步骤将在UniApp中使用mui-player插件播放M3U8/FLV视频流。请注意，确保视频流地址的有效性和可访问性，以及根据需要进行样式和功能的自定义。除了使用mui-player插件外，UniApp中还可以使用其他播放器插件或原生组件来播放视频流。

uniapp：记录使用uniapp对接腾讯音视频插件（TUICallKit ）

sunluyi的博客

03-07

5719

记录使用uniapp对接腾讯音视频插件（TUICallKit ）过程分享。

uniapp引入腾讯视频插件

m0_37792384的博客

05-10

1188

先上图 1.使用方法： "plugins": { "tencentvideo": { "version": "1.3.27", "provider": "wxxxxxxxxxxxxxxx需要更改" } } 2.配置page.json "usingComponents": { // #ifdef MP-WEIXIN "txv-video": "plugin://tencentvideo/video" // #endif

uniapp视频播放器（h5+app）

farme_guan的博客

04-27

7255

这是关于一篇在uniapp使用video视频播放器，支持自定义播放器样式，支持手势操作，选集、倍数和清晰度切换，支持SRT字幕格式。

uni-app中使用video无法播放腾讯视频链接

weixin_46918045的博客

01-31

1614

3，添加后，点击详情查看文档，并获取插件的appid跟版本号，点击开发文档，查看如何引入和使用该插件。4，回到hbuilder，添加player，对应的版本号和provider。，使用小程序的微信管理员账号扫码登录，在左侧菜单栏最底下，找到设置。5，pages.json找到要使用的页面，添加配置。2，点添加，搜索腾讯视频并且添加。6，最后，就可以在当前页面使用。

uniapp 小程序接入腾讯实时音视频trtc-wx

m0_46693606的博客

03-14

2621

微信 App iOS 最低版本要求：7.0.9微信 App Android 最低版本要求：7.0.8小程序基础库最低版本要求：2.10.0由于小程序测试号不具备和的使用权限，请使用企业小程序账号申请相关权限进行开发。由于微信开发者工具不支持原生组件（即和标签），需要在真机上进行运行体验。

uniapp对接腾讯云IM+音视频。音视频含UI集成

qying的博客

03-14

4999

uniapp对接腾讯云IM+音视频集成到android和ios，音视频含ui集成

uniapp使用腾讯地图

06-28

### 回答1： Uniapp是一种基于Vue.js的跨平台开发框架，可以快速开发出同时运行在多个平台的应用程序。而腾讯地图作为中国最大的地图服务提供商，已经被广泛应用于各类应用中。 Uniapp集成了腾讯地图SDK，通过使用腾讯地图API，实现地图相关的各种功能。开发者可以在Uniapp中引用相关的组件和模块，来快速实现地图应用。在引入腾讯地图SDK之后，开发者可以轻松地进行地图的基本操作，包括地图展现、缩放、平移、标记、定位等。在腾讯地图SDK中还提供了路线规划、搜索、POI等高级功能，可以满足更加复杂的地图应用需求。同时，腾讯地图SDK还针对移动端做了优化，能够提供更加流畅、快速的地图展现和操作体验。总之，通过在Uniapp中引入腾讯地图SDK，开发者可以快速简单地实现地图应用的需求，同时能够提供出色的地图展现和使用体验，为用户带来更好的服务。 ### 回答2： uniapp是一套使用Vue.js开发的跨平台开发框架，可以轻松地在多个平台上构建高性能、原生的应用程序。而腾讯地图是一款高度定制化的地图应用程序，提供了许多功能强大的地图API，帮助开发人员将地图应用程序无缝集成到他们的应用程序中。如何使用腾讯地图？第一步：在腾讯地图官网上，注册一个开发者账号，并创建一个项目。在创建项目时，需要提供一些基本信息，例如应用程序密钥，以及需要使用的API类型。第二步：在uniapp框架内，使用腾讯地图的SDK，将地图组件嵌入到应用程序中。可以通过在Vue.js组件中添加以下代码实现此目的： ```javascript <template> <view class="map-container"> <map :markers="markers" :show-location="showLocation" style="width: 100%; height: 100%;" @markertap="markertap" @regionchange="regionchange" @init="init" /> </view> </template> <script> import QQMapWX from '@/static/js/qqmap-wx-jssdk.min' import { mapState } from 'vuex' export default { data() { return { markers: [], showLocation: true, latitude: '', longitude: '' } }, onLoad() { this.initData() }, methods: { // 初始化数据 initData() { this.qqmapsdk = new QQMapWX({ key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }) }, // 点击地图标记点 markertap(e) { console.log(e) }, // 视野发生变化 regionchange(e) { console.log(e) }, // 地图初始化完成 init(e) { console.log(e) this.getLocation() }, // 获取当前位置 getLocation() { uni.getLocation({ type: 'gcj02', success: res => { console.log(res) this.latitude = res.latitude this.longitude = res.longitude this.qqmapsdk.reverseGeocoder({ location: { latitude: this.latitude, longitude: this.longitude }, success: res => { console.log(res) } }) } }) } }, computed: { ...mapState({ locationState: state => state.location }) }, onShareAppMessage() { return { title: '使用uniapp和腾讯地图构建高性能应用', path: '/pages/index/index', imageUrl: '/static/images/logo.png' } } } </script> <style> .map-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } </style> ``` 以上代码实现了在Vue.js组件中嵌入地图组件，并且使用了腾讯地图提供的api，获取了当前位置的经纬度，并且在地图中显示了位置。需要注意的是，在使用腾讯地图时，需要在Vue.js组件的<template>部分中使用地图组件，并且在<script>部分中引入腾讯地图的SDK。而在Vue.js组件的样式部分<style>，需要设置地图组件的位置和大小。在开发过程中，还需要注意调用合适的API，根据具体的应用程序需求，选择需要的API，完成对地图添加标记点、添加轨迹、获取地理位置信息等功能。同时，需要自行根据实际需要，调整地图组件的属性值，实现更加个性化的地图显示。总之，使用uniapp框架集成腾讯地图，可以实现跨平台的高性能地图应用程序，具有非常广泛的应用前景。 ### 回答3： Uniapp是一款强大的跨平台应用开发工具，它可以让开发者在一次开发中同时适配多种平台，如：iOS、Android、H5等。而腾讯地图是一款实现地图展示和服务的工具，它可以为开发者提供完整的地图服务，包含地图数据、导航功能、位置定位等。如果想在Uniapp中使用腾讯地图，首先需要在腾讯地图开放平台注册账户，并创建应用，得到应用的key，用于接入腾讯地图的API接口。接着，在Uniapp中安装与腾讯地图相关的插件和SDK，如：tmap位置选择器插件、tmap地图SDK插件等。这些插件和SDK可以帮助开发者在Uniapp中轻松使用腾讯地图的各种功能。在实际开发中，可以通过uni-tmap定位组件来获取设备当前位置，并将定位结果在地图上展示。同时，可以利用tmap地图SDK的接口实现地图的放大、缩小、拖动等操作，将地图上的标记点、路线规划等信息展示在地图上。此外，Uniapp还提供了一些高级的腾讯地图组件，如：tmap-polyline组件、tmap-circle组件等，这些组件可以为开发者提供更加细致的地图展示和定位服务。总之，通过Uniapp和腾讯地图的完美结合，开发者可以轻松实现各种地图展示和定位服务，为用户提供更好的应用体验。

uniapp 使用腾讯视频 的 坑

uniapp 使用腾讯视频的坑