作为xgplayer 插件,播放 HLS 流只需两步。 检测当前环境是否支持。 将HLS 插件传给 xgplayer 的 plugins 参数。 importPlayerfrom'xgplayer'importHlsPluginfrom'xgplayer-hls'letplayerif(document.createElement('video').canPlayType('application/vnd.apple.mpegurl')){// 原生支持 hls 播放player=newPlayer({el:do...
「HLS协议:」使用xgplayer-hls,可用于PC、安卓、IOS(ios&部分andr不需要插件,原生支持)。 在原生支持hls的情况下尽可能不使用xgplayer-hls,IOS浏览器原生即支持hls格式播放,但是缺少xgplayer-hls运行所需的Media Source Extensions。 import Player from 'xgplayer' import HlsPlugin from 'xgplayer-hls' let player i...
importPlayerfrom'xgplayer';constplayer =newPlayer({id:'vs',url:''})constoptions = {player: player,// 可选, 如果初始化的时候已经有播放器实例subTitles: [{//必选 字幕信息label:'中文',language:'',//必选id:'cn',//必选isDefault:false,//必选 是否是默认字幕url:'./subtitle/cn.vtt'//必...
小胡/dzzoffice xgplayer插件 一个功能强大,符合国内视频播放业务的 web 视频播放组件,由西瓜视频技术团队官方出品。 关于西瓜播放器 西瓜播放器 (xgplayer.js) 不是一个看片软件,而是一个 Web 开发上的视频播放器类库,也是一个独立的 UI 组件,用来实现在网页上播放视频的功能。不仅在 UI 层有灵活的表现,同时也...
1. 访问 xgplayer 的官方网站,下载适合您操作系统的安装包。 2. 打开安装包,按照提示进行安装。 3. 安装完成后,打开 xgplayer,您即可开始使用它来播放视频。 三、基本用法 1. 添加视频文件:在 xgplayer 界面,点击“添加”按钮,选择要播放的视频文件。 2. 播放视频:添加成功后,视频会自动播放。您也可以使用播放...
1.引入xgplayer库:首先需要在HTML页面中引入xgplayer库的CSS和JS文件。可以通过使用CDN等方式引入,或者下载相关文件并引入到项目中。 ```html ``` 2.创建播放器实例:在HTML页面中创建一个容器元素,并使用JavaScript代码创建xgplayer实例。可以通过指定配置参数来设置播放器的各种属性和行为。 ```html var player...
ios 使用 xgplayer 目前有一个关于接入海康监控进行视频融合的项目需求,按理说在前端技术发展如此迅速的今天,使用web播放一个视频应该是不算什么难事,只是万事都有意外,因很多视频厂家的监控数据都不是普通的mp4啥的,所以使用普通的object 或者video 是播放不了的,必须需要一些额外的插件进行支持,今天我们就来加载一...
配置封装xgplayer 这里是在Vue3中,去举这个例子,主要是学习xgplayer的配置项语法规则 首先来一个DOM元素,作为xgplayer的占位的地方 <template> </template> 然后把xgplayer下载一下,在引入到对应.vue文件中使用,指定配置项,就能够出来对应效果了 下载npm i xgplayer --save 这里是...
npm i xgplayer-mp4@alpha --save npm i xgplayer@next --save # Usage # NPM import Player from 'xgplayer' import Mp4Plugin from 'xgplayer-mp4' import 'xgplayer/dist/index.min.css' const player = new Player({ id: 'vs', plugins: [Mp4Plugin], mp4Plugin: { headers: { // Custom reques...
timeupdate是xgplayer的一个事件,它在视频播放的过程中定时触发,可以捕获当前播放位置的变化。本文将详细介绍xgplayer的timeupdate事件的用法,以及如何一步一步使用它来实现一些常见的功能。 1.引入xgplayer库 在使用xgplayer之前,首先需要将其引入到网页中。可以通过下载官方提供的xgplayer包,或者直接通过CDN进行引入。在html...