H5视频播放插件SuperVideo(原创)

 查看演示  website  立即下载

H5视频播放插件SuperVideo在线演示教程

更新时间：2020-08-29 00:30:21

更新说明：

1. 本插件已支持 npm安装使用  

npm i supervideo --save

2. 解决ESC取消全屏时无法完全退出全屏的BUG

3. 支持视频路径blob加密功能（只对mp4生效），用法如下：

import { Svideo, NextControl, VideoSource, DbspeenControl, FullScreenControl, BarrageControl } from 'supervideo'
    // 实例化一个“下一个”按钮控件
    const nextControl = new NextControl()
    // 实例化一个倍速控件
    const Dbspeen = new DbspeenControl()
    // 实例化一个弹幕输入框控件
    const barrageControl = new BarrageControl()
    // 实例化一个全屏按钮控件
    const fullScreenControl = new FullScreenControl()
    // 实例化视频播放资源
    const source = new VideoSource({
      // type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8) flv: 可播放flv视频
      // src: 视频路径，可以是本地路径亦可是网络路径
      type: 'mp4',
      // blob: false, // 是否blob加密MP4视频
      src: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Winston_Recall.mp4'
    })

    // /* 插件的常用配置参数 */
    const config = {
      // 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）
      autoplay: false,
      currentTime: 0, // 设置视频初始播放时间，单位为秒
      loop: false, // 是否循环播放
      muted: false, // 是否默认静音
      playbackRate: 1, // 视频默认播放速度
      poster: '', // 视频首帧图片路径
      volume: 0.5, // 视频默认音量 0-1
      showPictureInPicture: true, // 是否启用画中画模式按钮（>=Chrome10有效）
      source: source, // 为视频插件设置资源
      leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件
      rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件
      centerControls: [barrageControl] // 在底部控件栏中间插入 “弹幕输入控件”
    }

    // 初始化插件superVideo('videoContainer')请对应好html中的插件容器id.
    /* eslint-disable no-new */
    new Svideo('videoContainer', config)

更新时间：2020-08-17 00:59:29

更新说明：

1.应用户爸爸们的要求，特新增方法 "setPath", 用于支持 “切换视频播放源”的需求，用法如下：

video.setPath('xxx.mp4')

2.新增配置属性“loadingNode”,该属性可自定义加载动画的HTML节点，用法如下：

var node = document.createElement('span') node.innterHTML = '正在加载，请稍后...'
var video = new Super.Svideo('videoContainer', { ...loadingNode: '正在加载，请稍后...'
    // 用法一  
    loadingNode: node
        // 用法二  
        ...
})

更为复杂的html样式请自由发挥

更新时间：2020-08-02 23:46:10

更新说明：本次更新嵌入了 flvJs 转码引擎，用于支持 flv 相关格式的视频播放。

用法如下：

var video = new Super.Svideo('videoContainer', {
    source: new Super.VideoSource({
        // 引入视频资源        
        type: 'flv',
        src: '*****.flv'
    })
})

更新时间：2020/7/22 上午1:34:52

更新说明：

1. SuperVideo 兼容性更强，最低可兼容至IE10兼容EdgeHls格式视频最低兼容IE11

2. 全面优化交互效果。

新增点击屏幕 播放/暂停 的效果新增控件面板/进度条隐藏的效果优化进度条的效果，解决进度条在全屏切换中展示错误的BUG新增更加炫酷的加载动画    

更新时间：2020-07-20 00:38:07

更新说明：SuperVideo 新增 支持 HLS 播放协议。

具体用法如下：

var video2 = new Super.Svideo('videoContainer', {
    source: new Super.VideoSource({
        // 引入视频资源        
        type: 'm3u8',
        src: '*****.m3u8'
    })
})

历史版本superVideov1.0.6.zip下载（383kb）

更新时间：2020-06-26 22:02:12

更新说明：

1.新增“画中画”功能接口 

2. 新增“画中画”控件 

3.完善插件参考文档

https://hulalalalala.github.io/superVideo/api/index.html

历史版本superVideov1.0.5.zip下载（138kb）

更新时间：2020-06-21 23:27:22

更新说明：

1. 新增控件中间插槽（用法详见案例）

2. 新增弹幕接口 和 弹幕类 （用法详见案例）

3. 新增弹幕控件类（用法详见案例）

更新时间：2020-06-20 15:23:42

更新说明：

1. 进度条拖拽可以兼容移动端

2. 偷个懒，移动端将不再显示音量控制器，作者认为手机的侧键完全可以替代此控件

3. superVideo 可以支持原生video对象的所有事件监听，例如，监听播放事件：

video.addEventListener('play', () => {})

其它原生事件请参考video对象文档

拓展事件：

video.addEventListener('fullscreen', () => {
    // 监听全屏  
    console.log('is fullscreen !!!')
}) video.addEventListener('cancelfullscreen', () => {
    // 监听退出全屏  
    console.log('is cancelfullscreen!!!')
})

4. 修复 0.5 倍速 播放表现错误的BUG

更新时间：2020-06-15 00:23:32

更新说明：

1. 修改了在官方案例下，全屏出现展示BUG的问题

2. 优化了拖拽进度条的交互效果

3. 新增加载loading动画

4. 由于作者时间忙，依然没时间做移动端兼容，见谅~

更新时间：2020-06-11 23:36:53

SuperVideo - H5视频播放插件

SuperVideo是一款H5视频播放插件，基于H5 video 对象开发。 该项目用ES6语法编写，可将源码嵌入您的项目按需引用也可以打包后引用。 SuperVideo集成了大部分video对象常用属性与方法，内置了常用的视频播放控件，也支持用户自定义控件。当前版本为 SuperVideo 1.0测试版本，当前api是不稳定的并有可能随时发生变化。

安装使用

npm run build 将打包后的dist文件中的JS和CSS文件引入项目即可 您也可以将examples中的文件直接拿来使用，作者会长久维护此案例文件

基础用法

引入资源

<link href="main-css.css" rel="stylesheet"></head>
<script type="text/javascript" src="superVideo.js"></script>

编写代码

const nextControl = new Super.NextControl() // 实例化“下一个”按钮控件
const Dbspeen = new Super.Dbspeen() // 倍速控件
const fullScreenControl = new Super.FullScreenControl() // 实例化“全屏”控件
const video = new Super.Svideo('videoContainer', {
    source: new Super.VideoSource({ // 引入视频资源
        src: 'test.mp4'
    }),
    leftControls: [nextControl], // 控件栏左槽插入控件
    rightControls: [Dbspeen, fullScreenControl] // 控件栏右槽插入控件
})
video.addEventListener('change', (event) => { // 监听video各属性变化
    // console.log(event)
})
nextControl.addEventListener('click', () => { // 监听“下一个”按钮控件点击事件
    alert('click next menu !!!')
})
fullScreenControl.addEventListener('fullscreen', () => { // 监听进入全屏
    console.log('is fullscreen !!!')
})
fullScreenControl.addEventListener('cancelfullscreen', () => { // 监听退出全屏
    console.log('cancel fullscreen !!!')
})

ES6方式引用

将项目SRC文件下的JS和CSS文件放入您的项目，然后import按需引入核心类，资源类，控件类即可

import Svideo from 'Svideo'
import VideoSource from 'VideoSource'
const video = new Svideo('videoContainer', {
    source: new VideoSource({ // 引入视频资源
        src: 'test.mp4'
    })
})

开发自定义控件

编码

import Control from 'Control'
export default class CustomControl extends Control {
    constructor () {
        super()
    }
    create_ () {
        // 在这里编写控件相关代码
    }
}

使用

import CustomControl from 'CustomControl'
...
const video = new Svideo('videoContainer', {
    source: new VideoSource({ // 引入视频资源
        src: 'test.mp4'
    }),
    rightControls: [new CustomControl()] // 控件栏右槽插入控件
})
// or
video.addRightControl(new CustomControl())

PREVIOUS:
NEXT:
jQuery拖拽插件改变位置和尺寸(原创)
jq实现简单的todolist、TODOLIST(原创)