zoukankan      html  css  js  c++  java
  • vue播放rtmp

    VUE实现rtmp播放

    1.npm 安装插件

    idea工具terminal中命令通过命令安装插件,其他方式自行百度

    npm install vue-video-player --save // 内置video.js
    npm install videojs-flash --save //播放 RTMP 流,需要安装 videojs-flash 插件

    2.引入样式及JS

    考虑到其他组件会用到视频播放,所以在main.js内配置

    (1)videoJs的样式

    require('video.js/dist/video-js.css')

    (2)vue-video-player的样式

    require('vue-video-player/src/custom-theme.css')

    (3)把VueVideoPlayer导入并挂在到vue上

    import VideoPlayer from 'vue-video-player'
    Vue.use(VideoPlayer);

    3.具体业务模块使用

    (1)引入需要的文件(script标签内)

    import { videoPlayer } from 'vue-video-player'

    import  'videojs-flash'

    (2)组件代码

    <template>
    <div class="container">
    <div class="player">
    <video-player class="video-player vjs-custom-skin"
    ref="videoPlayer"
    :playsinline="true"
    :options="videoOptions">
    </video-player>
    </div>
    </div>
    </template>


    data() {
      return {
        videoOptions: {
          height: '260',
          sources: [{
            type: 'rtmp/mp4',
            src: 'rtmp://58.200.131.2:1935/livetv/hunantv'
          }],
          techOrder: ['flash'],
          muted: true, // 默认静音
          preload: 'auto', // 视频预加载
          autoplay: true,
          controls: true,
          notSupportedMessage: '此视频暂无法播放,请稍后再试'
        }
      }
    }

    参考资料:

    资料1:https://blog.csdn.net/xing_zlear/article/details/99640464

    资料2:https://blog.csdn.net/qq_40963664/article/details/79883159

  • 相关阅读:
    每周总结03
    Servlet2
    每周总结02
    周总结4
    河北省重大需求征集系统每日进度6
    周总结3
    hadoop命令
    复习uml
    周总结2
    河北省重大需求征集系统每日进度5
  • 原文地址:https://www.cnblogs.com/fujingtao5470/p/12335686.html
Copyright © 2011-2022 走看看