Video.js初始化有两种方式。
一种是在<video>标签里面加上class="video-js"和data-setup=‘{}‘属性。
注意,两者缺一不可。
刚开始的时候我觉得后面的值为空对象{},不放也行,导致播放器加载不出来,后来加上来就可以了。
另外一种初始化 video.js 的方法是通过JS,格式:
var player = videojs(‘my-player‘);
这样有个要求,就是不能配置data-setup,并且需要传入<video>的id。当然,如果不想一个个初始化,可以这样:
(function(){
var videos = document.getElementsByTagName(‘video‘);
for(i=0; i<videos.length; i++) {
var video = videos[i];
if(video.className.indexOf(‘video-js‘) > -1) {
videojs(video.id).ready(function(){
});
}
}
})();
video.js默认的播放按钮在左上角,应该是 video.js 开发人员认为放中间会遮挡内容,所以没放中间。
不过我们常见的一般都在中间,比较符合习惯。这是可以通过参数修改的,在<video>标签中加入vjs-big-play-centered类,就可以了。像这样:
class="video-js vjs-big-play-centered"
video.js 4.9开始支持<audio>标签,与video不同的是:播放audio时封面不会消失。
但是上面的播放框还是一直在的,配置方式和<video>标签一样,也必须要配置data-setup参数。
方法如下,在<video>标签中加入playsinline参数,
<video playsinline ></video>
注意,在iOS10之前用的是webkit-playsinline。
video.js 在未播放时,会显示一个大的播放按钮,上面我们提到如何让他居中。那么,如何在视频暂停时也显示这个播放按钮呢?
有很多用JS的解决办法,感觉都挺麻烦的。其实用css就可以搞定了:
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
是不是很轻便很简单 :)
video.js 默认的播放按钮是圆角矩形,我们一般更熟悉播放按钮为圆形的:
那么怎么改呢?还是用CSS来解决。
.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: #73859f;
background-color: rgba(115,133,159,.5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
因为原来居中的时候宽度和高度改变了,所以margin的值也要相应改变
这个是视频播放的时候用得较多的功能,解决方法如下。
.video-js.vjs-playing .vjs-tech {
pointer-events: auto;
}
pointer-events是CSS的一个属性,用来控制鼠标的动作。
总有那么一些情形,我们需要 video.js 重新载入视频文件。
比如,立即播放刚上传的文件。
例如这样的标签:
<video id="example_video">
<source id="videoMP4" src="1.mp4" />
</video>
<button id="reload">重载</button>
在video.js中,用现成的js方法就可以实现:
var video = document.getElementById(‘example_video‘);
var source = document.getElementById(‘videoMP4‘);
$("#reload").click(function() {
video.pause()
source.setAttribute(‘src‘, ‘2.mp4‘);
video.load();
video.play();
});
或者:
var video = document.getElementById(‘example_video‘);
$("#reload").click(function() {
video.pause()
video.setAttribute(‘src‘, ‘2.mp4‘);
video.load();
video.play();
});
video.js 默认倒序显示时间,也就是视频播放的剩余时间。
要显示当前的播放时间,以及总共视频时长,加2行CSS解决:
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}
向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等
作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码
jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。
这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等
在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue
在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集
常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。
安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装
BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为
使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!