vue video.js使用技巧

摘要:
1.1标记的一种方式是<并且需要传入<(function(){varvideos=document.getElementsByTagName('video');i<i++){varvideo=videos[i];if(video.className.indexOf('video-js')>-1){videojs(video.id).ready(function({});

1 初始化

Video.js初始化有两种方式。

1.1 标签方式

一种是在<video>标签里面加上class="video-js"data-setup='{}'属性。

注意,两者缺一不可。

刚开始的时候我觉得后面的值为空对象{},不放也行,

导致播放器加载不出来,后来加上来就可以了。

1.2 JS方式

另外一种初始化 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(){
            });
        }
    }
})();

2 播放按钮居中

video.js默认的播放按钮在左上角,应该是 video.js 开发人员认为放中间会遮挡内容,所以没放中间。

不过我们常见的一般都在中间,比较符合习惯。

这是可以通过参数修改的,在<video>标签中加入vjs-big-play-centered类,就可以了。

像这样:

class="video-js vjs-big-play-centered"

3 支持<audio>音乐标签

video.js 4.9开始支持<audio>标签,与video不同的是:播放audio时封面不会消失。

但是上面的播放框还是一直在的,配置方式和<video>标签一样,也必须要配置data-setup参数。

4 禁止在iPhone safari中自动全屏

方法如下,在<video>标签中加入playsinline参数,

<video playsinline ></video>

注意,在iOS10之前用的是webkit-playsinline

5 暂停时显示播放按钮

video.js 在未播放时,会显示一个大的播放按钮,上面我们提到如何让他居中。

那么,如何在视频暂停时也显示这个播放按钮呢?

vue video.js使用技巧第1张

有很多用JS的解决办法,感觉都挺麻烦的。

其实用CSS就可以搞定了:

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}

是不是很轻便很简单 :)

6 播放按钮变○圆形

video.js 默认的播放按钮是圆角矩形,

我们一般更熟悉播放按钮为圆形的:

vue video.js使用技巧第2张

那么怎么改呢?还是用CSS来解决。

.video-js .vjs-big-play-button{
    font-size: 2.5em;
    line-height: 2.3em;
    height: 2.5em;
     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- 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;
     2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
}

因为原来居中的时候宽度和高度改变了,所以margin的值也要相应改变

7 点击屏幕播放/暂停

这个是视频播放的时候用得较多的功能,解决方法如下。

.video-js.vjs-playing .vjs-tech {
    pointer-events: auto;
}

pointer-events是CSS的一个属性,用来控制鼠标的动作,具体可参考《CSS里的pointer-events属性》。

8 重载视频文件

总有那么一些情形,我们需要 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();
});

9 进度显示当前播放时间

video.js 默认倒序显示时间,也就是视频播放的剩余时间。

要显示当前的播放时间,以及总共视频时长,加2行CSS解决:

.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}

参考地址:

    1. http://codepen.io/davatron5000/pen/LskGD
    2. Video.js 4.9 - Now <audio> can join the party!
    3. 在网站中嵌入VideoJs视频播放器
    4. 如何禁止 iPhone Safari 视频自动全屏?
    5. New <video> Policies for iOS
    6. Video.js Show play button only when paused
    7. Reloading video.js player after changing source using jquery
    8. Show the current time of the video, instead of the remaining time on videojs

免责声明:文章转载自《vue video.js使用技巧》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Feign 动态URL 解决记录无限轮播图的制作下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

HTML基本语法

1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编译,直接由浏览器执行 HTML文件是一个文本文件,包含了一些HTML元素,标签等 HTML文件必须使用.html或.htm为文件名后缀 HTML是大小写不敏感的,HTML...

WPF设置样式的几种方式

第一种方式是直接使用Setter来进行,可以对Background等进行设置。 <Window.Resources> <Style TargetType="Button"> <Setter Property="Background" Value="Red"/> </Style>&...

js前端使用jOrgChart插件实现组织架构图的展示

项目要做组织架构图,要把它做成自上而下的树形结构。  需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效: https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07 一、说明 (1)通过后台查询数据库,生成树形数组结构,返回到前台。...

Spring.profile配合Jenkins发布War包,实现开发、测试和生产环境的按需切换

前两篇不错 Spring.profile实现开发、测试和生产环境的配置和切换 - Strugglion - 博客园https://www.cnblogs.com/strugglion/p/7091021.html 详解Spring中的Profile - 简书https://www.jianshu.com/p/948c303b2253 spring-mvc-...

css动画之波纹

样式定义: #ContactAbout { height: auto; position: relative; overflow: hidden; } #sectioncontact { display: block; 100%; position: relative; height: 700px; z-index: 10; } #secti...

利用Matlab自带的深度学习工具进行车辆区域检测与车型识别【福利-内附源码与数据库】(一)

前言 本此的博客详细记录了我使用Matlab进行车辆区域检测(R-CNN)与车型识别(AlexNet)的过程。并且内包含了训练数据集、测试数据集以及源码。 训练数据集是使用的斯坦福大学的一个车型数据库,内含196种不同的车型。写到这里我真的很想吐槽一下这个数据库里面的奥迪车系:很多黑白的图片啊喂!!! 做训练的时候AlexNet数据输入维度是3啊喂!!!...