byted-player

安装与使用

查询版本

大家在 头条静态资源库 查询最新版本。

安装

插件依赖播放器本身，所以无论是使用模块化还是使用 CDN 的方式，都需要先加载播放器(安装方式)。安装插件提供两种方式：

• npm 包方法

import Player from 'byted-player';
import from '[插件名]';// import from 'byted-player-mp4';
import 'byted-player-css';

let player = new Player({
  // 配置
});

• cdn 方法

<link href="//s0.pstatp.com/cdn/expire-1-M/byted-player-css/[版本]/byted-player.css" type="text/css" rel="stylesheet" />
<script src="//s3.pstatp.com/cdn/expire-1-M/byted-player/[版本]/byted-player.min.js" type="application/javascript"></script>
<script src="//s0.pstatp.com/cdn/expire-1-M/[插件名]/[版本]/[插件名].min.js" type="application/javascript"></script>

注意：

• 播放器核心包还有插件都使用 babel 编译到 ES5。
• CDN 调整频繁，如果发现地址不对，请查阅 cdn 查询最新地址。

使用播放器

1. 在页面设置播放器容器

<div id="mse"></div>

需要在页面增加“占位符”，告诉播放器要生成的位置。其中 id 是必选项，播放器的宽和高与该容器的宽和高一致。

1. 配置播放器

let player = new Player({
    id: 'mse',
    url:'/mp4/'
});

or

let player = new Player({
    el: document.querySelector('#mse'),
    url:'/mp4/'
});

通过实例化Player类就可以生成一个播放器，通过start这个API通知播放器将要播放的视频地址并启动。更多配置选项参考配置

注：播放器的启动不等同于播放

注: 要结合webpack的style-loader和css-loader一起使用。

使用插件

播放器提供了很多功能强大的插件，如 mp4 流播放、hls 播放、flv 播放、监控与统计、头条视频服务封装等，详情参看 插件