事关我对于视频流播放的那些事

陈小夫子
725 阅读3分钟

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

写在前面:最近在深圳找了一家新公司,注意开发数据可视化相关的项目,接触到的偏echarts以及视频监控,这次的话,跟大家分享一下我在项目中开发过的关于视频播放,列表播放以及hls视频流的对接.

事关我对于视频流播放的那些事

项目需求

  • 后台有一个摄像头列表,点击某个摄像头则弹出窗口,并播放该摄像头监控的视频详情(单个播放)
  • 后台有一个模块,轮播循环展示重点布控的地点所返回的监控视频(视频列表)

插件对比

个人使用的是vue框架进行日常开发,找到有三款插件可以实现以上需求,分别是:

  • video.js
  • vue-video-player
  • xgplayer

video.js

  1. CDN引入
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
  1. 创建dom容器以便于渲染
  <video id="demovideo_1" controls preload="none" width="640" height="264"
         poster="http://vjs.zencdn.net/v/oceans.png">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    //播放hls视频流(样式的视频流地址,播不了就说明配置有问题)
<!-- <source src="http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8" type="application/x-mpegURL"/> -->
  </video>
  1. 获取dom元素进行渲染
var player = videojs('demovideo_1',{
    muted: true,
	controls : true/false,      
	height:300, 
	width:300,
	loop : true,
	// 更多配置得去找..(不常用)
});

vue-video-player

  1. 安装(vue-video-player是依赖video.js的) npm install video.js vue-video-player --save

2.引入

// 第一个是videoJs的样式，后一个是vue-video-player的样式
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
//在main.js内
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);
  1. 使用
<template>
  <div class="container">
      <video-player  
      class="video-player vjs-custom-skin"
         ref="videoPlayer"
         :playsinline="true"
         :options="playerOptions"
         @play="onPlayerPlay($event)"
         @pause="onPlayerPause($event)"
         >
      </video-player>
  </div>
</template>
<script> import { videoPlayer } from 'vue-video-player';
export default {
    data () {
        return {
            playerOptions: {
                // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                  // type: "application/mp4" // MP4视频
                  type: "application/x-mpegURL", // hls视频格式
                  src: "video.m3u8" //你的m3u8地址（必填）
                }],
                poster: "poster.jpg", //你的封面地址
                width: document.documentElement.clientWidth,
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                // controlBar: {
                // timeDivider: true,
                // durationDisplay: true,
                // remainingTimeDisplay: false,
                // fullscreenToggle: true  //全屏按钮
                // }
            },
        }
    }
}

xgplayer

  1. 安装 npm install --save xgplayer

  2. 引入(就不写main.js的了,跟video-player一样)

// 普通视频
import Player from "xgplayer";
// 播放hls视屏
import HlsJsPlayer from "xgplayer-hls.js";

3.渲染

<template>
  <div class="container">
      <div
      class="xg-video"
         ref="my-video"
         id="my-video"
         >
      </div>
  </div>
</template>

// script

        let player = new HlsJsPlayer({
          id: "my-video",
          el: document.getElementById(`my-video`),
          url: "http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8",
          volume: 0,
          isLive: true,
          // cssFullscreen: true,
          autoplay: true,
          fluid: true,
          fitVideoSize: "auto",
          width: 209,
          height: 122,
          controls: true,
          cors: true, // 请求是否跨域
          playsinline: true,
          // replay:'true'
        });

列表取流播放

列表取流播放也有几种方式,分别是上面的西瓜播放器和video-player及video.js播放,下面就不贴代码了太多了,讲一下各自的原理吧

  1. video-player播放视频列表
- 因为这个是用组件的形式渲染的,而且配置项和回调很多,功能比较丰富也方便自定义
- 其实个人比较推荐用来展示单个视频流的,但是也有可以展示列表的方式.
- 把 playerOptions 属性清空为空数组,然后在接口返回数据的地方进行动态push,然后再渲染dom;
  1. video.js和xgplayer播放视频列表
//这两个原理都是差不多的,通过后端的数据跟字符串拼接生成动态的id,以及数据的遍历循环渲染

//dom
<template>
  <div class="container">
      <div
      v-for="(item, index) in pointsList" :key="item.id"
      class="xg-video"
         ref="my-video"
         :id="`my-video${item.id}`"
         >
      </div>
  </div>
</template>



// script
//拿着视频路径列表动态创建playerList
let playerList = [];
resList.forEach((item, index) => {
let player = new HlsJsPlayer({
  // id: item.id,
  el: document.getElementById(`my-video${index}`),
  url: item,
  volume: 0,
  isLive: true,
  // cssFullscreen: true,
  autoplay: true,
  fluid: true,
  fitVideoSize: "auto",
  width: 209,
  height: 122,
  controls: true,
  cors: true, // 请求是否跨域
  playsinline: true,
  // replay:'true'
});
playerList.push(player);
});
this.VideoPlayerList = playerList;

End

avatar
文章
阅读
粉丝