加mp4文件后js失效_记录一波video.js的使用及问题
最近的项目中需要播放视频,鉴于html5元素的一些坑及不想自己造轮子,于是就找到了web端播放视频使用量最多的插件video.js,video.js是国外开发者开发的,英语本身就不好的我看英文文档简直是折磨,国内又没有中文文档,能搜的到的基本是简单的使用及最基本的api的介绍,想要实现一些自定义功能无从下手,所以我在这里整理一份我所遇到的问题及解决方法
1、视频初始化
video.js有两种初始化方式,一种是在video的html标签之中,一种是使用js来进行初始化
1.1、在video中进行初始化
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
width="600"
height="400"
data-setup='{}'>
To view this video please enable JavaScript, and consider upgrading to a
web browser that
supports HTML5 video
效果
1.2、使用js进行初始化
To view this video please enable JavaScript, and consider upgrading to a
web browser that
supports HTML5 video
var player = videojs(document.getElementById('myVideo'), {
controls: true, // 是否显示控制条
poster: 'xxx', // 视频封面图地址
preload: 'auto',
autoplay: false,
fluid: true, // 自适应宽高
language: 'zh-CN', // 设置语言
muted: false, // 是否静音
inactivityTimeout: false,
controlBar: { // 设置控制条组件
/* 设置控制条里面组件的相关属性及显示与否
'currentTimeDisplay':true,
'timeDivider':true,
'durationDisplay':true,
'remainingTimeDisplay':false,
volumePanel: {
inline: false,
}
*/
/* 使用children的形式可以控制每一个控件的位置,以及显示与否 */
children: [
{name: 'playToggle'}, // 播放按钮
{name: 'currentTimeDisplay'}, // 当前已播放时间
{name: 'progressControl'}, // 播放进度条
{name: 'durationDisplay'}, // 总时间
{ // 倍数播放
name: 'playbackRateMenuButton',
'playbackRates': [0.5, 1, 1.5, 2, 2.5]
},
{
name: 'volumePanel', // 音量控制
inline: false, // 不使用水平方式
},
{name: 'FullscreenToggle'} // 全屏
]
},
sources:[ // 视频源
{
src: '//vjs.zencdn.net/v/oceans.mp4',
type: 'video/mp4',
poster: '//vjs.zencdn.net/v/oceans.png'
}
]
}, function (){
console.log('视频可以播放了',this);
});
2、controlBar组件的说明
playToggle, //播放暂停按钮
volumeMenuButton,//音量控制
currentTimeDisplay,//当前播放时间
timeDivider, // '/' 分隔符
durationDisplay, //总时间
progressControl, //点播流时,播放进度条,seek控制
liveDisplay, //直播流时,显示LIVE
remainingTimeDisplay, //当前播放时间
playbackRateMenuButton, //播放速率,当前只有html5模式下才支持设置播放速率
fullscreenToggle //全屏控制
currentTimeDisplay,timeDivider,durationDisplay是相对于 remainingTimeDisplay的另一套组件,后者只显示当前播放时间,前者还显示总时间。若要显示成前者这种模式,即 '当前时间/总时间',可以在初始化播放器选项中配置:
var myPlayer = neplayer('my-video', {controlBar:{
'currentTimeDisplay':true,
'timeDivider':true,
'durationDisplay':true,
'remainingTimeDisplay':false
}}, function() {
console.log('播放器初始化完成');
});
3、video.js样式修改
.video-js{ /* 给.video-js设置字体大小以统一各浏览器样式表现,因为video.js采用的是em单位 */
font-size: 14px;
}
.video-js button{
outline: none;
}
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3{ /* 视频占满容器高度 */
height: 100%;
background-color: #161616;
}
.vjs-poster{
background-color: #161616;
}
.video-js .vjs-big-play-button{ /* 中间大的播放按钮 */
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: rgba(115,133,159,.5);
border-width: 0.12em;
margin-top: -1.25em;
margin-left: -1.75em;
}
.video-js.vjs-paused .vjs-big-play-button{ /* 视频暂停时显示播放按钮 */
display: block;
}
.video-js.vjs-error .vjs-big-play-button{ /* 视频加载出错时隐藏播放按钮 */
display: none;
}
.vjs-loading-spinner { /* 加载圆圈 */
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
.video-js .vjs-control-bar{ /* 控制条默认显示 */
display: flex;
}
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}
.vjs-button > .vjs-icon-placeholder:before{ /* 控制条所有图标,图标字体大小最好使用px单位,如果使用em,各浏览器表现可能会不大一样 */
font-size: 22px;
line-height: 1.9;
}
.video-js .vjs-playback-rate .vjs-playback-rate-value{
line-height: 2.4;
font-size: 18px;
}
/* 进度条背景色 */
.video-js .vjs-play-progress{
color: #ffb845;
background-color: #ffb845;
}
.video-js .vjs-progress-control .vjs-mouse-display{
background-color: #ffb845;
}
.vjs-mouse-display .vjs-time-tooltip{
padding-bottom: 6px;
background-color: #ffb845;
}
.video-js .vjs-play-progress .vjs-time-tooltip{
display: none!important;
}
4、动态切换视频
var data = {
src: 'xxx.mp4',
type: 'video/mp4'
};
var player = videojs('myVideo', {...});
player.pause();
player.src(data);
player.load(data);
// 动态切换poster
player.posterImage.setSrc('xxx.jpg');
player.play();
// 销毁videojs
//player.dispose();
5、设置语言
5.1传统形式开发
对于使用
var player = videojs('myVideo', {
language: 'zh-CN' // 初始化时设置语言,立即生效
});
/* 动态切换语言
使用这种方式进行动态切换不会立即生效,必须有所操作后才会生效。如播放按钮,必须点击一次播放按钮后播放按钮的提示文字才会改变
*/
//player.language('zh-TW');
5.2、vue开发
import Video from 'video.js'
/* 不能直接引入js,否则会报错:videojs is not defined
import 'video.js/dist/lang/zh-CN.js' */
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
import video_en from 'video.js/dist/lang/en.json'
import 'video.js/dist/video-js.css'
Video.addLanguage('zh-CN', video_zhCN);
Video.addLanguage('en', video_en);
6、解决在iPhone中播放时自动全屏问题(2019.09.23)
在iPhone设备上播放视频时(微信浏览器上也会有这个问题)会自动全屏,这里的全屏并不是常规的手机横屏那种全屏,而是类似于一个modal弹窗的全屏,解决办法就是在video标签中添加playsinline="true"属性
webkit-playsinline="true"
playsinline="true"
class="video-js vjs-big-play-centered vjs-fluid">
7、未解决的问题
控制条的高级自定义,如图中的进度条及时间在上面,播放按钮、上一个视频、下一个视频,设置及音量在下面这种控件该如何实现?
如有知道实现这种高级自定义控制条方式的大神请在评论区留下您的代码
8、参考文章
加mp4文件后js失效_记录一波video.js的使用及问题相关推荐
- 加mp4文件后js失效_Jquery方法load之后导致js失效解决方法
Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...
- 加mp4文件后js失效_video不能播放mp4的问题(一)
最近项目中遇到了video标签无法播放mp4的问题,表现如下: IE可正常播放 safari需要点击两次可播放 chrome内核系列都不能播放 原因排除 首先,排除掉代码错误:替换其它可播放的mp4文 ...
- android webview js 失效,Android WebView注入JQuery、JS脚本及执行无效的问题解决
在项目中遇到JQuery注入后,执行无效的问题. 我们知道必须在网页加载完成后,也就是在onPageFinished()方法被调用后才能执行被注入的JS. 但是在有些手机上并不能成功执行,我的解决方案 ...
- webpack 保存文件后自动打包_继webpack后又一打包神器Parcel
前言: 在继grunt.gulp实现自动化构建之后,webpack又引领前端打包潮流,众所周知的是,vue-cli的脚手架就是基于webpack进行项目打包的.而webpack还在上升的势头的时候,又 ...
- 滚动后mouseleave失效_发动机上的三点接触球轴承失效案例
点击蓝字获取更多精彩信息 轴承的好坏会直接影响到发动机的正常使用,发动机的高压转子前支点采用的是三点接触球轴承,下面中华轴承网(简称:华轴网)分享是有关三点接触球轴承的失效案例. 1.三点接触球轴承失 ...
- 滚动后mouseleave失效_滚动直线导轨副用钳制器可靠性试验设计
直线模组_直线导轨-广东凯特精密机械有限公司www.htpm.com.cn 滚动直线导轨副用钳制器是一个具有钳制或刹车功能的多用途产品,因此在对钳制器的可靠性进行评估时应对其多方面的参数进行试验研究 ...
- shrio 登陆后 还是失效_在 iPhone 上取消订阅后,应用或内容会立即失效吗?
在 iPhone 中,一些应用和服务需要进行订阅,即您需要支付相应的费用以获得应用或服务中内容的访问权限.如果您想要取消订阅某个项目,可以按以下步骤操作: 前往 iPhone "设置&quo ...
- 滚动后mouseleave失效_大型调心滚子轴承偏载失效案例详情
点击上方蓝字关注我们! 这里的调心滚子轴承是使用在某风力发电机上的主轴轴承,据了解,该大型调心滚子轴承在使用过程中承受了较大的轴向载荷,从而导致调心滚子轴承偏载,整套轴承无法进行调心,造成轴滚道表面剥 ...
- 容器删除元素后迭代器失效_使用迭代器遍历容器元素
迭代器为我们提供了统一的遍历容器的方式. 1.Iterator源码分析 public Iterator<E> iterator() {return new Itr(); }private ...
最新文章
- NetMagic Simple Overview
- POI的入门:创建单元格设置数据
- linux怎么制作运行包,简单 RPM 包制作
- Android 横竖屏切换的处理 (转载)
- play 拦截器_编写Play 2的模块,第2部分:拦截器
- C++基础知识(三)—— 常量
- ImageView的scaleType详解
- windows7系统软件无法卸载的解决方法
- mysql 显示右边所有名称_查询表 - [ MySql参考手册 ] - 在线原生手册 - php中文网
- Tiktok现阶段最简单的三种变现模式,小白也可轻松上手
- android之统一字体大小
- python2.3嵌套if结构:
- 下列( )软件不能编辑html语言,2016年职称计算机Dreamweaver考试题库五
- Spring MVC @ExceptionHandler、@ControllerAdvice、@RestControllerAdvice 统一异常处理
- 小公司代理记账报税常见问题
- 易飞ERP工作流解决方案之【第三方OA系统集成】
- python3中的sorted()函数
- python NLP中文近义词
- 紫书习题3-6纵横字谜的游戏
- 一侧肩膀怕风吹怎么办
热门文章
- 学习UE4动画蓝图:配置手部IK
- 常用函数调用出错解决办法 ——MATLAB的License到期
- Exposure Software Blow Up for mac(图像无损放大PS插件)
- html快速注释的方法,html快速注释按键
- 【0087】【创建postgres后端进程】PostgreSQL创建监听端口的底层原理(2)
- C++经典算法题-老鼠走迷官(一)
- python 抢券_抢券抢不到生气了,准备写一个自动抢券的东东,时间成本最低的 web 方案是什么?...
- 内储说下六微第三十一
- JVM和数据库调优方案
- java uml类图教程_Java利器之UML类图详解