Software-player NPM

Software-Player

一款 HTML5、Flash 播放器，支持 HLS and DUSH，内部已做多种视频格式兼容。如有不兼容格式需要在 node 服务中调用 Software-Player API 来转换视频格式。

兼容格式: flv|mkv|mov|mp4|webm|Ogg|mp3

Software-CLI 已经内置该组件，通过 Software-CLI 可以直接将播放器组件的源代码复制到项目目录中并自动安装依赖包。建议通过 Software-CLI 来安装，便于您修改源代码，打造自己的播放器组件。

安装

npm i software-player --save

使用 Software-CLI 安装：sw add player

使用指南

step1: 配置 webpack（非 webpack 自行解决）

(1)本地测试用的视频文件复制到dist
 copy: [
      {
        from: path.join(process.cwd(), "./examples/assets"),
        to: "./assets",
      },
    ]
(2)添加对flash播放器文件的loader支持【此处的loaders是software-dev-server的配置】
 loaders: [
      {
        test: /\.(swf)(\?.*)?$/,
        loader: "url-loader",
        options: {
          limit: 10240,
          name: "media/[name].[hash:7].[ext]",
        },
      },
    ]

step2: 准备 HTML 文件 index.html

<div id="video1"></div>
<button id="switch">切换视频</button>

step3: 准备 css 文件 index.css

.page-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
h1 {
  text-align: center;
}
html,
body {
  background-color: azure;
}

step4: 准备 JS 文件 index.js

import { initPlayer, Util } from "../src/index";
import "./index.css";

const testURL = {
  fmp4: "https://taporb.com/videos/hls/wmsj.mp4", //本机服务
  hls2: "https://taporb.com/videos/hls/index.m3u8", //本机服务
  hls: "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8",
  mp4: "//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",
  flv: "//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
};

const { changeSource } = initPlayer({
  container: "#video1",
  size: {
    width: "680px",
    height: "300px",
  },
  options: {
    sources: ["assets/wmsj.webm"], //本地视频
  },
  events: {
    enter() {
      Util.log.success("处理进入播放页面事件");
    },
    leave() {
      Util.log.warn("处理离开播放页面事件");
    },
    play() {
      Util.log.info("处理paly事件");
    },
    pause() {
      Util.log.info("处理pause事件");
    },
  },
  isFlash: true,
});

document.querySelector("#switch").addEventListener("click", () => {
  changeSource([testURL.mp4]);
});

step5: 启动本地服务

npm run dev

使用说明

引用

import { initPlayer, Util } from "software-player";

initPlayer({ container: String, size: JSON, options:JSON, events:JSON , isFlash:Boolean}): Function

参数
container: 必选参数，字符串，外部 HTML 容器选择器名称
size: { //必选参数,JSON对象
  width: 视频播放器的宽度，需要带单位，默认 680px
  height: 视频播放器的高度，需要带单位,默认 320px
}
options:{
  autoplay: 布尔值，是否自动播放，默认false
  muted: 布尔值，是否静音，默认false
  loop: 布尔值，是否循环播放，默认false
  preload: 字符串，是否预加载，默认none，有3个值：auto/matadata/none
  playbackRates: 数组，播放速度列表，默认[0.5, 1.0, 1.5, 2.0]
  aspectRatio: 字符串，视频画面比例，默认"16:9"
  sources: 必选参数，数组，视频源，默认false【目前暂不支持传多组地址，后续扩展】
  poster: 字符串，封面地址
  errorDisplay: 布尔值，是否显示错误信息，默认true
  controls: 布尔值，是否显示控制栏，默认true，如果是音频设置false
  notSupportedMessage: 字符串，不支持播放默认显示的文本，默认“浏览器不支持播放此格式视频”
}
events:{ //可选参数，JSON对象
  play(){},//播放事件
  playing(){},//播放中事件
  pause(){},//暂停事件
  ended(){},//播放结束事件
  seeking(){},//跳转视频事件
  seeked(){},//跳转视频结束事件
  error(){},//异常事件
  loadstart(){},//加载开始事件
  progress(){},//加载中事件
  loadedmetadata(){},//加载元数据结束事件
  waiting(){},//等待事件
  ratechange(){},//改变速率事件
  volumechange(){},//音量改变事件
  stalled(){},//网络异常事件
  enter(){},//进入播放器页面事件
  leave(){}//离开播放器页面事件
}
isFlash: 可选参数，布尔值，是否需要支持Flash(包括flv),默认false

返回值 函数，changeSource，用于从外部动态切换视频源

changeSource(urls: Array, isPlay: Boolean): void

参数
  urls: 必选参数，数组，视频源地址
  isPlay: 必选参数，布尔值，切换视频源后是否自动播放

Util 工具

log 对象

log.clear():清理控制台
log.info(...param): info 信息
log.error(...param): error 信息
log.warn(..param): warn 信息
log.success(..param): success 信息
log.json(obj): 打印JSON对象

types 数据类型

STRING: "String",
BOOLEAN: "Boolean",
NUMBER: "Number",
NULL: "Null",
UNDEFINED: "Undefined",
FUNCTION: "Function",
ARRAY: "Array",
EMPTYJSON: "EmptyJSON",
JSON: "JSON",
MAP: "Map",
SET: "Set",
SYMBOL: "Symbol",

formatType(varible:any): String 获取变量的数据类型，返回 Util.types 中的一种值

checkArguments(args: any, expect: Util.types, message: String): Boolean|Error 检测参数类型，类型与预期不一致时抛出错误

服务端切片推流服务

目前支持 HLS 视频流播放，后续支持 DASH 视频流的播放。

1.服务安装（Ubuntu）

安装 FFmpeg：执行命令 sudo apt install ffmpeg,安装过程中需要注意输入 root 用户密码及控制台交互是否继续下载的提示。

安装成功后，使用命令 ffmpeg -v 测试是否安装成功，如果有 ffmpeg 版本号显示则安装成功。

2.nginx 配置

将以下配置复制到 server 下，注意修改自己的视频目录。ffmpeg 在处理视频时高度占用 CPU，nginx 需要使用单独的服务器，不要与项目服务在同一个服务器。

  location /videos {
    alias /nginx/data/videos;# 改成自己服务器的视频目录
    add_header Cache-Control no-cache;
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, DELETE, PUT, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,  Access-Control-Expose-Headers, Token, Authorization';

    types {
      application/vnd.apple.mpegurl m3u8;
      video/mp2t ts;
    }
  }

3.视频处理

视频编码/格式转换和切片

API 调用：

const { formatVideo } = require("software-player/server");

const test = async () => {
  let input = path.join(process.cwd(), "examples", "assets");
  let output = path.join(process.cwd(), "examples", "assets");
  let filename = path.join(process.cwd(), "examples", "assets", "wmsj.flv");
  let res = await formatVideo(input, output, filename, true, true);
  console.log(res);
};

test();

formatVideo(input:String, output:String, filename:String, isSlice:Boolean, isCoverage:Boolean)

input: 原始格式视频文件根目录
output: 格式转换视频文件输出根目录
filename: 需要格式转换的视频文件路径（绝对路径）
isSlice: 是否需要切片
isCoverage: 同名文件已存在是否覆盖，否，不会转换格式，是转换格式并覆盖原来的文件

4.播放器组件访问切片视频

将视频源地址换为自己的视频服务地址: https://taporb.com/videos/hls/index.m3u8。注意域名和视频目录替换。

initPlayer({
  container: "#video1",
  size: {
    width: "680px",
    height: "300px",
  },
  options: {
    sources: ["https://taporb.com/videos/hls/index.m3u8"], //本地服务视频
  }
});