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

所属分类:媒体,其他-音频和视频

 41593  280  查看评论 (75)
分享到微信朋友圈
X
H5视频播放插件SuperVideo(原创) ie兼容10
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())
相关插件-音频和视频

音乐播放器

音乐播放器插件
  音频和视频
 43131  360

jQuery视频轮播(原创)

让视频像图片一样轮播
  音频和视频
 40091  366

一个交互式的动画SVG(鼓)工具包

有关如何使用GSAP和jQuery创建动画和交互式SVG鼓套件的教程。
  音频和视频
 31133  439

音乐泡泡排序(CPC泡泡排序)

泡泡排序制作的音乐剧!每个音高被分配一个与其比例程度相对应的数字 (例如 c 大调中的 C 将从0-7 数字中获得 )。
  音频和视频
 18551  242

讨论这个项目(75)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    故旅 0
    2021/5/19 17:14:51
    请问大佬这个支持直播推流地址播放吗,能不能手机端全屏😀
        ELLIPSIS0
        2021/5/25 16:55:47
        只能网页全屏,手机全屏你还得调用底层的 ”屏幕旋转“ 然后进入”沉浸模式“,这些离不开底层的支持
    回复
    贝尔你啥时候把头发剪了 0
    2021/5/19 9:48:47
    请问点击进度条没有反应 是什么原因
        ELLIPSIS0
        2021/5/25 16:54:30
        目前只支持拖拽
    回复
    风无痕 0
    2021/3/17 15:49:16
    大佬,加个分屏功能
        ELLIPSIS0
        2021/3/26 13:46:40
        啥叫分屏,没见过
        风无痕0
        2021/6/16 17:23:39
        一个界面播放多个视频
        ELLIPSIS1
        2021/7/19 12:07:53
        你可以创建多个播放器容器,实例化多个视频
    回复
    未名湖 0
    2021/3/2 18:57:55
    建议增加超清高清切换功能
        ELLIPSIS0
        2021/3/26 13:47:08
        懒得维护了,你自己拓展个组件吧
    回复
    ELLIPSIS 0
    2021/1/28 22:58:31
    作者说一句哈,本插件的重度使用需要开发者有面向对象编程的基本概念,否则用起来会云里雾里的只能照猫画虎做基本的功能。 回复
    勋章?? 0
    2021/1/26 16:48:14
    下载之后 用dw打开就不能播放 直接用浏览器就可以
        ELLIPSIS0
        2021/1/28 22:56:13
        DW什么鬼,啥年代了放弃吧。建议你开发用VSCODE。网页开发调试当然是用浏览器啦,DW的网页显示毕竟只是基础的布局展示,没有真正实现浏览器内核。
    回复
    Lucky L~ 0
    2021/1/9 21:50:46
    下一个视频的路径怎么给?哪位大佬帮帮忙!!
        ELLIPSIS1
        2021/1/11 16:09:33
        video.setPath('xxx.mp4')
        Lucky L~0
        2021/1/11 23:04:12
        谢谢,第一次做这个,看你的注释才懵懂看懂一些,没想到前端也是如此繁琐
        ELLIPSIS0
        2021/1/18 1:21:30
        封装继承多态都有用到,会java看这个不难
        Lucky L~0
        2021/1/19 10:14:12
        抱歉,我也是java新手,虽然看得懂,但是就是有点蒙,哈哈哈
        😥
    回复
    孙勇 0
    2020/12/25 23:56:41
    电脑端可以播放FLV,手机端就播放不了了,这是啥问题呢 回复
    that's why ? 0
    2020/12/10 11:14:26
    请问在leftControls中添加自定义控件如何初始化修改显示图标或样式等。 leftControls: [nextControl, nextControl1, nextControl2, nextControl3, nextControl4, nextControl5]
        ELLIPSIS1
        2020/12/13 17:01:04
        自定义控件里import css文件,图标的话建议你用阿里的iconfont
    回复
    醒醒我们回家了 0
    2020/11/9 17:43:06
    大佬方便的话能不能看下这两个问题。

    1.没有提供自定义dom的接口,比如视频控制栏的自定义样式。

    2.点击进度条没法快进快退,只能拖拽。

    3.拖动进度条 所有弹幕节点会消失,
        ELLIPSIS1
        2020/11/10 22:33:20
        1. dom样式你直接用css覆盖就行,!important加权重就行。
        2. 点击进度条节点暂时没有增加此功能的打算,感觉这个操作可有可无。
        3. 拖拽进度条程序会自动清空弹幕,这个操作是为了保证弹幕是可以与播放时间同步的。所以建议你添加弹幕的时候,最好与播放时间关联一下,根据播放时间来加载弹幕,而不是一股脑添加进去。
        らStruggle┾旧事0
        2020/11/11 16:10:48
        能加一个进度条拖拽吗,恰好这个功能很重要,就完美了😀
        ELLIPSIS0
        2020/11/12 10:20:41
        有拖拽呀,但是没有点击
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复