uniapp爱玩小灰视频播放器使用流程

最新推荐文章于 2024-05-16 21:58:37 发布
最新推荐文章于 2024-05-16 21:58:37 发布
阅读量5.3k 收藏 5
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32457999/article/details/107011770
版权

原生插件通用使用流程：

  1. 购买插件，选择该插件绑定的项目。
  2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
  4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/androidiOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

awxhVideo 简介

uni-app 原生端（Android）爱玩小灰视频播放器插件。支持调整显示比例，滑动调节播放进度、声音、亮度，双击播放、暂停，重力感应自动进入/退出全屏以及手动进入/退出全屏，倍速播放的视频组件。

功能列表

  • 调整显示比例

  • 滑动调节播放进度、声音、亮度

  • 双击播放、暂停

  • 重力感应自动进入/退出全屏以及手动进入/退出全屏

  • 倍速播放

  • 视频截图

  • 列表小窗全局悬浮播放

  • 连续播放一个列表的视频

  • 广告播放

  • 边播边缓存

  • 弹幕

  • 多路播放器同时播放

  • 没有任何控制UI的纯播放

  • Android 8.0画中画

  • 无缝衔接播放

  • 抖音，实现预加载

使用教程

|API|说明| |---|---|---| |start|开始播放| |pause|暂停播放| |resume|继续播放| |replay|重新播放| |release|释放播放器| |getinfo|获取视频信息| |start|开始播放| |pause|暂停播放| |start|开始播放| |pause|暂停播放| |set|设置视频参数| |startFullScreen|进入全屏| |stopFullScreen|退出全屏| |startTinyScreen|开启小屏| |stopTinyScreen|退出小屏| |setRotation|画面旋转|

事件称名说明返回参数
@onPlayerStateChanged监听播放器状态改变触发事件e
@onPlayStateChanged监听播放状态改变触发事件e

引用方式

<awxh-video  :thumb="thumb" :isLive="false" :title="title" :src="url" ref="videoView1" class="yincang" @onPlayerStateChanged="onPlayerStateChanged" @onPlayStateChanged="onPlayStateChanged"></awxh-video>
参数

options {Object} 相关选项

属性类型默认值必填说明
thumbstring否视频缩略图
titlestring否视频标题
srcstring是视频播放地址
isLivebooleanfalse否是否直播

API

start()

播放视频

参数
  • 无
示例
this.$refs.videoView1.start();

pause()

暂停播放视频

参数
  • 无
示例
this.$refs.videoView1.pause();

resume()

继续播放视频

参数
  • 无
示例
this.$refs.videoView1.resume();

replay()

重新播放视频

参数
  • 无
示例
this.$refs.videoView1.replay();

release()

释放播放器

参数
  • 无
示例
this.$refs.videoView1.release();

getinfo(options,callback)

获取视频播放信息

参数
  • 空对象
回调方法

callback {function (result)} 

没有监听

1.触发回调方法返回 result{Object} 格式 |属性|类型|说明| |---|---|---| |Duration|string|获取视频总时长| |CurrentPosition|string|获取当前播放的位置| |BufferedPercentage|string|获取当前缓冲百分比| |CurrentPlayerState|string|获取当前播放器的状态| |CurrentPlayState|string|获取当前的播放状态| |TcpSpeed|string|获取缓冲速度| |width|string|获取视频宽| |height|string|获取视频高|

示例
this.$refs.videoView1.getinfo({}, ret => {
                a.ret = ret;
                const msg = JSON.stringify(ret);
                uni.showModal({
                    title: '提示',
                    content: msg,
                    success: function(res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            });

set()

设置视频

参数

options {Object} 相关选项 |属性|类型|默认值|必填|说明| |---|---|---|---|---| |value|string||是|设置标识符|

value{string} 可选值

值说明
scale_default默认大小
scale_16916:9
scale_434:3
scale_original原始大小
scale_match_parent填充
scale_center_crop居中裁剪
speed_0_50.5倍速
speed_0_750.75倍速
speed_1_01倍速
speed_1_51.5倍速
speed_2_02倍速
mirror_rotate镜像旋转
btn_mute静音
qx_mute取消静音
示例
this.$refs.videoView1.set('scale_default');

startFullScreen()

进入全屏

参数
示例
this.$refs.videoView1.startFullScreen();

stopFullScreen()

退出全屏

参数
  • 无
示例
this.$refs.videoView1.stopFullScreen();

startTinyScreen()

开启小屏

参数
  • 无
示例
this.$refs.videoView1.startTinyScreen();

stopTinyScreen()

退出小屏

参数
  • 无
示例
this.$refs.videoView1.stopTinyScreen();

setRotation()

画面旋转

参数

options {Object} 相关选项 |属性|类型|默认值|必填|说明| |---|---|---|---|---| |rotation|string||是|旋转角度|

示例
this.$refs.videoView1.setRotation({
                rotation: '90'
            });
监听事件
事件称名说明返回参数
onPlayerStateChanged监听播放器状态改变触发事件e
onPlayStateChanged监听播放状态改变触发事件e
onPlayerStateChanged示例
onPlayerStateChanged(e) {
            this.PlayerState = e.detail.playerState;
        },
onPlayStateChanged示例
onPlayStateChanged(e) {
            this.PlayState = e.detail.playState;
        },

playerState{int} 状态值

值说明
10普通播放器
11全屏播放器
12小屏播放器

playState{int} 可选值

值说明
-1播放错误
0空闲
1准备
2已准备
3播放
4暂停播放
5播放完毕
6缓冲
7已缓冲
8开始播放中止
示例
<template>
    <div>
        <awxhVideo
            :thumb="thumb"
            :isLive="false"
            :title="title"
            :src="url"
            ref="videoView1"
            class="yincang"
            @onPlayerStateChanged="onPlayerStateChanged"
            @onPlayStateChanged="onPlayStateChanged"
        ></awxhVideo>
        <view class="fanhan"><image src="../../static/arrow-left.png" style="width: 30px;height: 30px;"></image></view>

        <text>播放状态：{{ PlayState }}</text>
        <text>播放器状态：{{ PlayerState }}</text>

        <div class="demo">
            <button type="primary" @click="onClickPlay()">开始播放</button>
            <button type="primary" @click="pause()">暂停</button>
            <button type="primary" @click="resume()">继续播放</button>
            <button type="primary" @click="replay()">重新播放</button>
            <button type="primary" @click="release()">释放播放器</button>

            <button type="primary" @click="getinfo()">获取视频信息</button>

            <button type="primary" @click="set('scale_default')">默认大小</button>
            <button type="primary" @click="set('scale_169')">16:9</button>
            <button type="primary" @click="set('scale_43')">4:3</button>
            <button type="primary" @click="set('scale_original')">原始大小</button>
            <button type="primary" @click="set('scale_match_parent')">填充</button>
            <button type="primary" @click="set('scale_center_crop')">居中裁剪</button>
            <button type="primary" @click="set('speed_0_5')">0.5倍速</button>
            <button type="primary" @click="set('speed_0_75')">0.75倍速</button>
            <button type="primary" @click="set('speed_1_0')">1倍速</button>
            <button type="primary" @click="set('speed_1_5')">1.5倍速</button>
            <button type="primary" @click="set('speed_2_0')">2倍速</button>
            <button type="primary" @click="set('mirror_rotate')">镜像旋转</button>
            <button type="primary" @click="set('btn_mute')">静音</button>
            <button type="primary" @click="set('qx_mute')">取消静音</button>

            <button type="primary" @click="startFullScreen()">进入全屏</button>
            <button type="primary" @click="stopFullScreen()">退出全屏</button>
            <button type="primary" @click="startTinyScreen()">开启小屏</button>
            <button type="primary" @click="stopTinyScreen()">退出小屏</button>

            <button type="primary" @click="setRotation('90')">画面旋转90</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            PlayerState: 10,
            PlayState: 10,

            title: 'Hello',

            url: 'http://1252463788.vod2.myqcloud.com/95576ef5vodtransgzp1252463788/e1ab85305285890781763144364/v.f10.mp4',
            thumb: 'http://vimg1.ws.126.net/image/snapshot/2017/11/Q/6/VD3B5JBQ6.jpg'
        };
    },
    onBackPress(o) {
        if (this.PlayerState !== 10) {
            this.$refs.videoView1.back();
            return true;
        }
    },

    methods: {
        onPlayerStateChanged(e) {
            this.PlayerState = e.detail.playerState;
        },
        onPlayStateChanged(e) {
            this.PlayState = e.detail.playState;
        },
        getinfo() {
            var a = this;
            this.$refs.videoView1.getinfo({}, ret => {
                a.ret = ret;
                const msg = JSON.stringify(ret);
                uni.showModal({
                    title: '提示',
                    content: msg,
                    success: function(res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            });
        },
        onClickPlay() {
            var a = this;
            this.$refs.videoView1.start();
        },

        set(v) {
            this.$refs.videoView1.set({
                value: v
            });
        },
        setRotation(v) {
            this.$refs.videoView1.setRotation({
                rotation: v
            });
        },
        pause() {
            this.$refs.videoView1.pause();
        },
        release() {
            this.$refs.videoView1.release();
        },
        replay() {
            this.$refs.videoView1.replay();
        },
        startTinyScreen() {
            this.$refs.videoView1.startTinyScreen();
        },
        startFullScreen() {
            this.$refs.videoView1.startFullScreen();
        },
        stopFullScreen() {
            this.$refs.videoView1.stopFullScreen();
        },
        stopTinyScreen() {
            this.$refs.videoView1.stopTinyScreen();
        },
        resume() {
            this.$refs.videoView1.resume();
        }
    }
};
</script>

<style lang="scss">
.fanhan {
    background-color: rgba(0, 0, 0, 0.3);
    width: 35px;
    height: 35px;
    border-radius: 25px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    top: -200px;
    left: 10px;
}
.yincang {
    height: 210px;
}
.demo {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}
.demo-view {
    width: 700rpx;
    flex: 1;
    margin: 10rpx;
}
</style>
爱玩小灰
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uni设置缓存、获取缓存、控制台查看缓存、检测是否存在某缓存、删除缓存
努力、拼搏、奋进
07-23 4200
uni设置缓存、获取缓存、控制台查看缓存、检测是否存在某缓存、删除缓存
uni-app-video(支持后台播放音频的视频播放器).zip
10-16
uni-app-video(支持后台播放音频的视频播放器).zip
uniapp 视频播放（点播、直播、悬浮窗、重力感应、滑动调节）组件 Ba-Video
最新发布
三杯五岳
05-16 1537
Ba-Video 是原生视频播放组件。支持点播、直播；支持悬浮窗、全屏、小屏；支持封面、显示比例；支持滑动调节播放进度、声音、亮度（全屏）；支持快进、回退、倍速播放；支持重力感应、视频截图；支持无缝衔接播放等。
uniapp视频播放组件使用
https://ligo100.cn 小何博客欢迎访问。
06-20 8088
文章目录[隐藏] 前言视频播放组件定义及使用最终效果 前言 最新基于uniapp开发了视频播放 app，其中个人觉得核心东西就是播放器，我在做的过程中使用的是uniapp video 组件，使用方法如下。 视频播放组件定义及使用 1. 新建一个目录命名为 template,专门存模板(此说法源于以前开发微信小程序)。新建一个 video-player.vue 文件。 2. 复制下面代码。注...
uniapp 集成腾讯云超级播放器问题
weixin_45610757的博客
01-14 998
H5 1.h5页面使用腾讯云播放器需要引用腾讯云的播放器的js，引用之后会发现报错，所以采用webview的方式加载html的方式进行开发 重点： H5开发场景不通使用的方式会不一样，如果使用官方的webview会发现vue页面无法进行数据的传递，只能初始化的时候传值拼在链接上面，所以H5，如果需要vue除了链接传值还有其他的传值，这边建议的是，采用iframe vue 页面的数据 <iframe :src="txVideourl" ref="iframe"></iframe> 数
基于uni-app开发的一款视频播放器插件
热门推荐
洋洋的博客
10-13 2万+
yy-video-player 基于uni-app开发的一款视频播放器插件，开箱即用，具有视频下载，页面返回，弹幕，进度条等功能。 使用截图 非全屏待播放 全屏播放 使用教程 导入插件 import yyVideoPlayer from '@/components/yy-video-player.nvue'; 声明插件 components: { yyVideoPlaye...
手把手教你uniapp原生插件开发-（无限制缓存）video控件的实现
sfsgtc的博客
04-25 1830
本人对官方原生插件离线包进行修改，封装了一个video控件，可实现任意大小的缓存。
uniapp原生插件-YL视频播放器案例源码
09-22
在本文中，我们将深入探讨如何使用uniapp原生插件YL视频播放器，以及它在不同应用场景中的实现方式。uniapp是一个跨平台的开发框架，它允许开发者使用一套代码库来构建iOS、Android、Web等多个平台的应用。原生插件...
uniapp视频分享预览小程序
06-01
六一收到个不同以往的需求，我的指导老师最近有点忙，让我们帮忙做一个可以通过二维码预览视频的小程序，收到需求后，因为只是临时用一下，不打算写一套完整的系统，所以大概的思路就是，其他成员将视频通过ftp传入...
uniapp小程序模仿抖音视频
09-11
【uniapp小程序模仿抖音视频】 在移动互联网时代，短视频应用如抖音已经成为用户日常娱乐和信息获取的重要平台。作为开发者，使用uniapp框架来模仿抖音视频的功能，可以快速构建一款类似的应用，实现视频浏览、播放...
微信小程序-音乐播放器插件源码-uniapp
04-16
【微信小程序-音乐播放器插件源码-uniapp】是一个专门为微信小程序开发的音乐播放器组件，基于uniapp框架构建。uniapp是一款跨平台的前端开发工具，它允许开发者用一套代码编写应用，同时适配iOS、Android、H5等多个...
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
uni-app视频播放及下载功能
tyoubinn的博客
10-15 6980
视频列表页 <template> <view class="video_main"> <view class="video_item" v-for="item in list" :key="item.id" @click="handleGoVideo(item)" > <image mode="widthFix" :src="item.img" .
uni-app 框架建小程序跳转h5页面播放视频并下载到本地
m0_70190404的博客
04-11 1370
uni-app 框架建小程序跳转h5页面播放视频并下载到本地
ExoPlayer详解——入门（官方文档）
csdn_zxw的博客
03-05 1万+
ExoPlayer详解系列文章 ExoPlayer详解——入门（官方文档） ExoPlayer详解——媒体类型（官方文档） ExoPlayer详解——高级主题（官方文档） 一、ExoPlayer，你好 简单用例 入门ExoPlayer包括实现以下步骤： 将 ExoPlayer 添加为项目的依赖项。 创建一个 SimpleExoPlayer 实例。 将播放器连接到视图（用于视频输出和用户输入）。 ...
uniapp android播放本地视频
前端程序员、项目经理、人工智能博主
11-29 1002
本文将介绍如何在uniapp开发中实现Android平台播放本地视频的功能。首先我们会梳理整个实现过程的流程，并使用表格列出每个步骤需要做的事情。然后，我们会逐步解释每个步骤需要做的事情，并提供相关的代码示例。
UniApp之播放视频、 下载视频到手机相册、添加下载进度条功能（踩坑记录）
wh20141212的博客
06-11 2820
最近有写到一个uniapp视频下载的功能 ememem 其实下载好写 但是加入进度条以后就出现了一些bug 首先，添加进度条以后，加载的时候开头会反复加载 其次在downloadTask.onProgressUpdate的回调中的信息弹出框不会弹出 也百度了一些资料 但是使用百度的写法发现并没有解决这些bug 最后请同事帮我看了下 找到了原因 下载视频的时候相当于立马创建了一个水池 往里面注入水的过程就是下载的过程 当点击下载的时候 回调会立刻执行也就是水池建立完毕了 所以返回的下载进度百分
使用vtwinfx插件时fcpx意外退出_uniapp爱玩小灰视频播放器使用流程
weixin_39849387的博客
11-13 406
原生插件通用使用流程： 购买插件，选择该插件绑定的项目。 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。 开发完毕后正式云打包 付费原生插件目前不支持离线打包。An...
uniapp原生插件-YL视频播放器
白玉梁的专栏
09-29 7246
YL视频播放器是一款适用于安卓端的高性能原生插件（支持3核心切换（exo，ijk，安卓原生），支持点播录播，小窗播放，支持各种视频播放常用功能，适用于各种常见播放场景如在线教育，小视频，朋友圈等等！
uniapp 视频播放器
09-15
在uniapp中使用视频播放器组件，可以通过引入第三方插件或使用uniapp自带的视频标签进行实现。如果你想要播放m3u8、flv或mp4格式的视频流，你可以使用mui-player插件或video标签来实现。具体步骤如下： 1. 引入mui-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值