首页
学习
活动
专区
工具
TVP
发布

videojs插件使用「建议收藏」

videojs插件使用 介绍:兼容性强,开源免费,文档清晰,界面可定制等 使用整理:使用主要针对于移动端视频播放,考虑的点:视频显示适配手机宽度;适配定义样式;在微信端,安卓、ios视频空间控件不同,定制等会自动被微信视频控件覆盖...true, // 是否自适应布局 inactivityTimeout: 0, // 闲置超时 nativeControlsForTouch: false, // 是否使用浏览器原生的控件...Component Options var player = videojs('video-id', { controlBar: { muteToggle: false } }); 其他组件:声音...videojs("example_video_1", { plugins : { PowerOff : {} } }, function(){ }); 给插件按钮加样式,显示到合适的位置...* 此选项将在“novtt”建立video.js(即video。novtt js)。否则,vtt.js捆绑video.js

9.7K20
您找到你想要的搜索结果了吗?
是的
没有找到

videojs播放器插件使用详解

remainingTimeDisplay':false, volumePanel: { inline: false, } */ /* 使用children的形式可以控制每一个控件位置...controls 类型: boolean 确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。...如果指定,Video.js显示控件(类vjs-playback-rate)允许用户从选择数组中选择播放速度。选项以从下到上的指定顺序显示。...此选项将用于Video.js(即video.novtt.js)的“novtt”版本中。否则,vtt.js与Video.js捆绑在一起。 组件选项 Video.js播放器是一个组件。...flash swf 指定Video.js SWF文件在Flash技术位置位置: videojs('my-player', { flash: { swf: '//path/to/videojs.swf

51.4K117

FFmpeg推流命令总结

声音参数: -b:a——设置每Channel(最近的SVN版为所有Channel的总合)的流量。(单位请引用下方注意事项) -ar——设置采样率。 -ac——设置声音的Channel数。...-acodec ( -c:a ) ——设置声音编解码器,未设置时与影像相同,使用与输入文件相同之编解码器。 -an——不处理声音,于仅针对影像做处理时使用。.../video.js/6.3.3/video-js.min.css" rel="stylesheet">     <script src="https://cdn.bootcss.com/<em>video.js</em>...html5shiv.min.js 由于<em>video.js</em>是基于H5构建的播放器,所以在浏览器不支持H5的时候,需要将相关资源引入到浏览器 放置播放器<em>控件</em> <video  id="myVideo"  class...m3u8的视频资源 给控件一个id主要方便video.js获取控件对象 使用video.js     // videojs 简单使用     var myVideo = videojs

4.9K40

Vue3开发:视频播放器video.js使用详解

安装使用 首先安装video.js: pnpm install video.js --save 然后引入css,在mian.js中: import "video.js/dist/video-js.css...上面只是最简单的demo,下面来说说video.js中比较常用的功能。...因为浏览器实际上是不允许自动播放声音,所以静音后自动播放基本不会失效,但是没有声音需要自己处理一下。 “play”:自动播放,与true效果一样。...SourceObject[]):设置视频源 src():string:获取当前视频源 play():播放 pause():暂停 paused():boolean:是否暂停 currentTime(number):设置播放位置...,就是seek currentTime():number:获取当前播放位置 muted():boolean:是否静音 muted(boolean):设置静音 duration():number:获取时长

2.8K30

Qt编写自定义控件60-声音波形图

一、前言 这个控件源自于一个音乐播放器,在写该音乐播放器的时候,需要将音频的数据转换成对应的频谱显示,采用的fmod第三方库来处理(fmod声音系统是为游戏开发者准备的革命性音频引擎,非常强大和牛逼),...fmod负责拿到音频数据对应的采样频谱数据,然后传给这个控件进行绘制即可,本控件主需要专注于绘制即可,这样fmod对应封装的类专注于音频采集等处理,实现了隔离,修改和增加功能比较方便,声音波形图控件除了可以设置采样的深度以外...为了可以直接定位到某一位置直接跳转到音频位置,还增加了绘制数线条定位线。...每个控件都有一个对应的单独的包含该控件源码的DEMO,方便参考使用。同时还提供一个所有控件使用的集成的DEMO。 每个控件的源代码都有详细中文注释,都按照统一设计规范编写,方便学习自定义控件的编写。...每个控件默认配色和demo对应的配色都非常精美。 超过130个可见控件,6个不可见控件。 部分控件提供多种样式风格选择,多种指示器样式选择。 所有控件自适应窗体拉伸变化。

1.8K20

video.js调用

>  一、总结(点击显示或隐藏总结内容) 一句话总结: 网上有各种细致的现成的代码可以拿来用,没必要自己死专 1、video.js有两种初始化方式?...一种是在video的html标签之中 一种是使用js来进行初始化 二、记录一波video.js的使用及问题 转自或参考:记录一波video.js的使用及问题 – – SegmentFault 思否 https...remainingTimeDisplay':false, volumePanel: { inline: false, } */ /* 使用children的形式可以控制每一个控件位置...3、video.js样式修改 .video-js{ /* 给.video-js设置字体大小以统一各浏览器样式表现,因为video.js采用的是em单位 */ font-size: 14px; } ....from 'video.js/dist/lang/zh-CN.json' import video_en from 'video.js/dist/lang/en.json' import 'video.js

30.9K21

经典布局:如何定义子控件在父容器中的排版位置

而我们要做的就是,通过各种定制化的参数,将其内部的子Widget按照自己的布局规则放置在特定的位置上,最终形成一个漂亮的布局。...Stack容器与前端中的绝对定位、iOS中的Frame布局非常类似,子Widget之间允许叠加,还可以根据父容器上下左右四个角的位置来确定自己的位置。...Stack提供了层叠布局的容器,而Positioned则提供了设置子Widget位置的能力。接下来,我们通过一个例子来看一下Stack和Position的用法吧。...Stack控件允许其子Widget按照创建的先后顺序进行层叠摆放,而Position控件则用来控制这些子Widget的摆放位置。...层叠布局Stack,以及与之搭配使用的,定位子Widget位置的Positioned容器,通过它们,实现多控件堆放的布局效果。 以上

4.5K30

duilib中获取的控件位置或者大小不对的可能的原因

duilib初学者可能总会有这样的疑问:为什么我获取的控件位置或者大小和我想象中的不一样?...位置不一样可能的原因: 1.xml中直接配置的位置和实际显示之后的位置确实是不一样的.xml中设置的位置(相对或绝对)都是基于他的父控件左上角.而实际显示之后获取的位置,是基于整个客户区的左上角; 2....控件位置的计算都是在WM_PAINT消息处理中进行的,在这个消息处理之前,获取到的位置都是旧的; 大小不一样可能的原因: 1.参考上面第2条,大小的计算也是在WM_PAINT消息处理中进行的; 2.有其他你忽略的干扰项....比如子控件采用相对布局时父控件有inset,或者父控件的大小有限; 3.可能只是因为其他控件的遮盖或者超出了父控件而不显示,看起来大小不对;

1.7K40

WPF 程序鼠标在窗口之外的时候,控件拿到的鼠标位置在哪里?

在 WPF 程序中,我们有 Mouse.GetPosition(IInputElement relativeTo) 方法可以拿到鼠标当前相对于某个 WPF 控件位置,也可以通过在 MouseMove...不过,在任意时刻去获取鼠标位置的时候,如果鼠标在窗口之外,将获取到什么点呢? 本文将介绍鼠标在窗口之外时获取到的鼠标位置。...验证这一点,我们把窗口移动到屏幕的左上角后,将鼠标移出客户区,左上角的控件其获取到的鼠标位置已经变成了 (0, 31),而这个是窗口标题栏非客户区的高度。...原理 Mouse.GetPosition 获取鼠标相对于控件的坐标点的方法在内部的最终实现是 user32.dll 中的 ClientToScreen。...而鼠标在窗口客户区之外的时候,此方法将返回 0,并且经过后面的 ToPoint() 方法转换到控件的坐标下。于是这才得到了我们刚刚观察到的坐标值。

37640

基于video.js来实现vue的视频播放功能

video.js是一个很好的视频播放插件,但是如果移植到vue上相信很多小伙伴很苦恼,是不是网上搜了一堆,发现不好使,我也是踩坑了,后来发现官方文档上就有,好尴尬,建议以后学习先看看官方文档,会有惊喜的...1.首先安装video.js,然后在main.js中引入 npm i video.js -D //安装 //main.js 引入 import Video from 'video.js' import...'video.js/dist/video-js.css' Vue.prototype....$video = Video; 1.先官方基础的使用方法,自定一个组件,说明一下在使用video.js组件时需要在beforeDestroy增加一个dispose()方法,来销毁它,这样就可以解决重复载入报错问题了...} ] } }; } }; 以上是最基础的,但是在vue项目中使用感觉还是有问题的,比如跳转到指定的位置去播放视频

14.2K30
领券