资讯专栏INFORMATION COLUMN

记录一波video.js的使用及问题

张率功 / 2180人阅读

摘要:最近的项目中需要播放视频,鉴于元素的一些坑及不想自己造轮子,于是就找到了端播放视频使用量最多的插件,是国外开发者开发的,英语本身就不好的我看英文文档简直是折磨,国内又没有中文文档,能搜的到的基本是简单的使用及最基本的的介绍,想要实现一些自定

最近的项目中需要播放视频,鉴于html5元素
1、视频初始化

video.js有两种初始化方式,一种是在video的html标签之中,一种是使用js来进行初始化

1.1、在video中进行初始化

效果

1.2、使用js进行初始化



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、动态切换视频
5、设置语言 5.1传统形式开发

对于使用 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、未解决的问题

控制条的高级自定义,如图中的进度条及时间在上面,播放按钮、上一个视频、下一个视频,设置及音量在下面这种控件该如何实现?

如有知道实现这种高级自定义控制条方式的大神请在评论区留下您的代码

7、参考文章

视频云web播放器样式和组件自定义

Video.js 踩坑简单入门

免费视频播放器videojs中文教程

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/59184.html

相关文章

  • 记录一波video.js使用问题

    摘要:最近的项目中需要播放视频,鉴于元素的一些坑及不想自己造轮子,于是就找到了端播放视频使用量最多的插件,是国外开发者开发的,英语本身就不好的我看英文文档简直是折磨,国内又没有中文文档,能搜的到的基本是简单的使用及最基本的的介绍,想要实现一些自定 最近的项目中需要播放视频,鉴于html5元素的一些坑及不想自己造轮子,于是就找到了web端播放视频使用量最多的插件video.js,video.j...

    crossoverJie 评论0 收藏0
  • 记录一波video.js使用问题

    摘要:最近的项目中需要播放视频,鉴于元素的一些坑及不想自己造轮子,于是就找到了端播放视频使用量最多的插件,是国外开发者开发的,英语本身就不好的我看英文文档简直是折磨,国内又没有中文文档,能搜的到的基本是简单的使用及最基本的的介绍,想要实现一些自定 最近的项目中需要播放视频,鉴于html5元素的一些坑及不想自己造轮子,于是就找到了web端播放视频使用量最多的插件video.js,video.j...

    xeblog 评论0 收藏0
  • 电影天堂React Native 客户端V2.0发布

    摘要:电影天堂客户端重新开始具体更新以为准。重新开始两年前发布了第一个版本。最为一名偏体验偏设计的前端开发者,对界面和用户体验都有极高的重视。 电影天堂React Native 客户端 重新开始! 具体更新以https://github.com/XboxYan/DYTT为准。 重新开始 两年前发布了第一个版本。 现在, 使用最新的react-native 0.57和全新的设计完成了V2.0 ...

    fizz 评论0 收藏0
  • 电影天堂React Native 客户端V2.0发布

    摘要:电影天堂客户端重新开始具体更新以为准。重新开始两年前发布了第一个版本。最为一名偏体验偏设计的前端开发者,对界面和用户体验都有极高的重视。 电影天堂React Native 客户端 重新开始! 具体更新以https://github.com/XboxYan/DYTT为准。 重新开始 两年前发布了第一个版本。 现在, 使用最新的react-native 0.57和全新的设计完成了V2.0 ...

    MockingBird 评论0 收藏0
  • Video.js视频控制进度栏标记

    摘要:一视频控制视频暂停对比自己手头的网站源码和实际生成的页面后,发现源码中包含了视频地址的标签,在实际页面中,会再生成一个子节点,视频播放控制,需要对这个子节点设置才能生效。 一、 视频控制 视频暂停 对比自己手头的网站源码和实际生成的页面后,发现源码中包含了视频地址的 标签,在实际页面中,会再生成一个子节点,视频播放控制,需要对这个子节点设置才能生效。 // 视频暂停代码 ...

    Eric 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<