一、介绍
首先,先介绍一下这个项目
目前这个软件内置了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"}