用uniapp写一个电视直播的页面

uni-app小程序电视直播

---

以下代码中，liveUrl表示直播地址，可以根据实际情况修改；liveTitle表示直播标题，liveTime表示直播时间，也可以根据实际情况修改。这里使用了uniapp中的视频组件来播放直播视频，同时在底部展示了直播标题和直播时间信息。

代码示例：

<template>
  <view class="container">
    <view class="live-container">
      <video :src="liveUrl" :autoplay="true" :controls="false"></video>
      <view class="live-info">
        <text class="live-title">{{liveTitle}}</text>
        <text class="live-time">{{liveTime}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      liveUrl: 'http://xxx.xxx.xxx/xxx.m3u8',  //直播地址
      liveTitle: 'CCTV 1 - 新闻联播',  //直播标题
      liveTime: '2021/01/01 19:00:00'  //直播时间
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.live-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.live-container video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.live-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.live-title {
  font-size: 28px;
  color: #fff;
}

.live-time {
  font-size: 20px;
  color: #fff;
}
</style>

以上代码仅供参考，具体实现细节和样式可以根据需求自行调整。

---

源码获取方法：

需要完整源码的朋友，希望你能点赞+收藏+评论，然后私信我即可~

会员学习群：【一对一答疑】

如果教程中有不懂的地方，可添加学习会员小助手咨询（微信：mifankeji77）