uni-app 悬赏制作rtmp视频播放器

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app 悬赏制作rtmp视频播放器

No relevant information found.

4 回复

有现成的,联系QQ:1804945430

公司承接项目外包开发、双端(Android,iOS)原生插件开发。
为什么选择我们: 1、1000 项目开发积累,数百种商业模式开发经验,更懂您的需求,沟通无障碍。 2、一年免费技术保障,系统故障或被攻击,2小时快速响应提供解决方案落地。 3、软件开发源码定制工厂,去中间商降低成本,提高软件开发需求沟通效率。 4、纯原生开发,拒绝模板和封装系统,随时更新迭代,增加功能,无需重做系统。 5、APP定制包办软件著作权申请,30天内保证拿到软著证书,知识产权受保护。 6、中软云科技导入严谨的项目管理系统,确保项目准时交付,快速抢占市场商机。 7、软件开发费、维护费、第三方各种费用公开透明,不花冤枉钱,不玩套路。
已有大量双端插件、App、小程序、公众号、PC、移动端、游戏等案例。
行业开发经验:银行、医疗、直播、电商、教育、旅游、餐饮、分销、微商、物联网、零售等
商务QQ:1559653449 商务微信:fan-rising
7x24小时在线,欢迎咨询了解

在uni-app中创建一个RTMP视频播放器,你可以利用video组件和一些第三方库来实现。虽然uni-app自带的video组件不支持RTMP流直接播放,但你可以通过webview组件来嵌入一个支持RTMP的播放器,比如使用Video.js和videojs-flash插件。

以下是一个通过webview嵌入Video.js播放RTMP流的示例:

  1. 准备HTML文件

首先,创建一个HTML文件(例如rtmp_player.html),内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RTMP Player</title>
    <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2.1.2/dist/videojs-flash.min.js"></script>
</head>
<body>
    <video id="rtmp_video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" data-setup='{}'>
        <source src="rtmp://your-rtmp-stream-url/live/stream" type="rtmp/mp4">
    </video>
    <script>
        var player = videojs('rtmp_video');
    </script>
</body>
</html>

请确保将rtmp://your-rtmp-stream-url/live/stream替换为你的RTMP流地址。

  1. 在uni-app中使用webview

在uni-app的页面中使用webview组件加载上述HTML文件:

<template>
    <view>
        <web-view src="/static/rtmp_player.html"></web-view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    onLoad() {
        // 可以在这里做一些初始化操作
    }
};
</script>

<style>
/* 你的样式 */
</style>

注意,rtmp_player.html文件需要放在static目录下,因为webview组件只能加载本地或在线资源,而static目录会被直接复制到打包后的项目中。

  1. 运行和调试

确保你的uni-app项目已经正确配置,并运行起来。你应该能够在应用中看到一个RTMP视频播放器,并播放指定的RTMP流。

这个示例使用了Video.js和videojs-flash插件来在Webview中播放RTMP流。虽然这不是直接在uni-app的video组件中播放RTMP流,但它是目前一个可行的解决方案。

回到顶部