在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:superVideo开源软件地址:https://gitee.com/shuaiwu123/superVideo开源软件介绍:SuperVideo - H5 Video player pluginIntroductionSuperVideo is a video playback plug-in developed based on H5 video.The project is written in ES6 syntax and packaged with webpack.SuperVideo integrates most common attributes and methods of video objects, built-in common video playback controls, and also supports user-defined controls. The current version is a test version, the current api is unstable and may change at any time NPM CDN DEMO API run or build build usage <link href="main-css.css" rel="stylesheet"></head><script type="text/javascript" src="superVideo.js"></script> 编写代码 // Instantiate a "next" button control var nextControl = new Super.NextControl() // Instantiate a double speed control var Dbspeen = new Super.DbspeenControl() // Instantiate a barrage input box control var BarrageControl = new Super.BarrageControl() // Instantiate a full-screen button control var fullScreenControl = new Super.FullScreenControl() // Instantiate video playback resources var source = new Super.VideoSource({ // type: Video type mp4: can play video files in common formats supported by browsers (mp4/ogg/webm) m3u8: can play live streaming video in Hls format (***.m3u8) flv: can play flv video // src: Video path, it can be a local path or a network path type: 'mp4', // blob: false, // Whether to encrypt blob MP4 video src: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Winston_Recall.mp4' }) /* options */ var config = { // Whether to play automatically (this function is limited by the browser security policy and may be invalid. The solution is to set mute when initializing, and unmute after loading) autoplay: false, currentTime: 0, // Set the initial playback time of the video, in seconds loop: false, // Whether to loop muted: false, // Whether to mute by default playbackRate: 1, // Default video playback speed poster: '', // The path of the first frame of the video volume: 0.5, // Video default volume 0-1 showPictureInPicture: true, // Whether to enable the picture-in-picture mode button (>=Chrome10 valid) source: source, // Set up resources for video plugins leftControls: [nextControl], // Insert the "Next" button control on the left side of the bottom control bar rightControls: [Dbspeen, fullScreenControl], // Insert the "double speed" control and "full screen" control on the left side of the bottom control bar centerControls: [BarrageControl] // Insert "Barrage Input Control" in the middle of the bottom control bar } //To initialize the plugin superVideo('videoContainer'), please correspond to the plugin container id in the html. var video = new Super.Svideo('videoContainer', config) npm usage 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) Custom control // Write control import { Control } from 'supervideo' export default class CustomControl extends Control { constructor () { super() } create_ () { // Write control related code here // this.element_ // Control parent container, add the HTML NODE you write to the container, then it can be loaded into the player normally } } // Use control new Svideo('videoContainer', { rightControls: [ new CustomControl() ] }) event thanks Contact the author email SuperVideo QQ group H5 front-end exchange QQ group Algorithm exchange QQ group If this plugin is helpful to you, please donate a popsicle money to encourage |
请发表评论