vue中使用腾讯云视频播放器

最新推荐文章于 2024-06-27 13:50:36 发布

技术项目经理

最新推荐文章于 2024-06-27 13:50:36 发布

阅读量4k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43837268/article/details/107254666

版权

vue 专栏收录该内容

192 篇文章 4 订阅

订阅专栏

1.index.html

<!-- 引入腾讯云视频 -->
    <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>;

2.使用

<!--
 * @Author: your name
 * @Date: 2020-07-09 14:16:25
 * @LastEditTime: 2020-07-10 16:22:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \puhuiApp3.10(直播页面)\src\components\liveStream\liveStreamVideo\liveStreamVideo.vue
--> 
<style lang="less" scoped>
.liveStreamVideo {
  #id_test_video {
    width: 100%;
    height: 100vh;
    /deep/ .vcp-fullscreen-toggle {
      display: none;
    }
  }
}
</style>
<template>
  <div class="liveStreamVideo">
    <div id="id_test_video"></div>
  </div>
</template>

<script>
export default {
  name: "liveStreamVideo",
  components: {},
  props: {},
  data() {
    return {
      // 视频控制器
      options: {
        rtmp:
          "rtmp://www.isst.top/live/162?txSecret=42a1ca6175158c25e1f54e5076fce16c&txTime=5F03F39E",
        // m3u8:"",
        m3u8:
          "http://hls01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd.m3u8",
        // m3u8:"https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8",
        flv: "", //请替换成实际可用的播放地址
        autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
        poster:
          "http://pic.yihuisoft.com/images/user_head_image/502-HeadPortrait.jpg?Expires=1904905330&OSSAccessKeyId=LTAI4FhfG8aSXdd1fPbFVPgk&Signature=GHK43KMjAGXgNQzulh6jxAFN7W4%3D",
        width: "100%",
        height: "100%",
        coverpic: {
          style: "stretch",
          src:
            "http://pic.yihuisoft.com/images/user_head_image/502-HeadPortrait.jpg?Expires=1904905330&OSSAccessKeyId=LTAI4FhfG8aSXdd1fPbFVPgk&Signature=GHK43KMjAGXgNQzulh6jxAFN7W4%3Dg"
        },
        wording: {
          2032: "请求视频失败，请检查网络",
          2048: "请求m3u8文件失败，可能是网络错误或者跨域问题"
        },
        controls: "default", //控制器
        h5_flv: true,
        x5_player: true,
        x5_type: "h5",
        x5_fullscreen: true,
        x5_orientation: 1,
        listener: function(msg) {
          console.log(msg);
        }
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 初始化直播
    initVideo(ele) {
      try {
        new TcPlayer(ele, this.options);
      } catch (error) {
        console.log(error);
      }
    }
  },
  created() {},
  mounted() {
    this.initVideo("id_test_video")
  }
};
</script>