使用uni-app开发一个取流播放器(网络电视)app简陋版

一、介绍

首先，先介绍一下这个项目
目前这个软件内置了53个电视节目，可以直接播放，并且支持手动输入链接播放视频，支持rtmp播放和网络视频。目前这个项目不太完善，但是还是有三个方向可以作为之后扩展的，1直播客户端，2视频播放器，3电视节目播放器。

电视节目取流地址来自：https://blog.csdn.net/qq_32502511/article/details/106855117
在此感谢作者(刘延林 | 梦陆)分享，侵删

app下载地址如下：
https://wws.lanzous.com/iuVtAgc4ygh
密码:bvtk

项目下载地址如下：
https://wws.lanzous.com/ixdUEga69qh
密码:3vxh

截图如下：

二、代码实现

本人制作的首页极其简陋，如有需要请自行修改。

首页代码如下：

<template>
	<view class="content">
		
		<!-- 用for循环将每个节目的按钮及文字输出 -->
		<view class="listview" v-for="(item,index) in tv_rtmp">
			<button v-on:click="to_tv(index)">
				<text>{
  {index+1}}{
  {item.name}}</text>
			</button>
		</view>
		
		<!-- 自助播放，点击后需要输入地址 -->
		<view class="other">
			<button v-on:click="play_other">自助播放</button>
		</view>
		
		<!-- 自定义的含输入框的弹出框 -->
		<prompt ref="prompt" @onConfirm="onConfirm" @onCancel="onCancel" title="播放地址" text="请输入播放链接"></prompt>
	</view>
</template>

<script>
	import prompt from '../../static/prompt.vue'; //导入自定义带输入框的弹出框
	export default {
    
		data() {
    
			return {
    
				//电视节目的取流地址及其电视台
				//电视节目取流地址来自：https://blog.csdn.net/qq_32502511/article/details/106855117
				//在此感谢作者(刘延林 | 梦陆)分享，侵删
				tv_rtmp: [
					{
    "name":"CCTV-1综合","path":"rtmp://58.200.131.2:1935/livetv/cctv1"},
					{
    "name":"CCTV-2财经","path":"rtmp://58.200.131.2:1935/livetv/cctv2"},
					{
    "name":"CCTV-3综艺","path":"rtmp://58.200.131.2:1935/livetv/cctv3"},
					{
    "name":"CCTV-4中文国际","path":"rtmp://58.200.131.2:1935/livetv/cctv4"},
					{
    "name":"CCTV-5体育","path":"rtmp://58.200.131.2:1935/livetv/cctv5"},
					{
    "name":"CCTV-6电影","path":"rtmp://58.200.131.2:1935/livetv/cctv6"},
					{
    "name":"CCTV-7军事农业","path":"rtmp://58.200.131.2:1935/livetv/cctv7"},
					{
    "name":"CCTV-8电视剧","path":"rtmp://58.200.131.2:1935/livetv/cctv8"},
					{
    "name":"CCTV-9记录","path":"rtmp://58.200.131.2:1935/livetv/cctv9"},