首页 / JAVASCRIPT / VideoJS的使用记录
VideoJS的使用记录
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了VideoJS的使用记录，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2877字，纯文字阅读大概需要5分钟。
内容图文
VideoJS
Video.js 是专为 HTML5 世界而打造的网络视频播放器。它支持 HTML5 视频和现代流媒体格式，以及 YouTube、Vimeo 甚至 Flash。支持在 PC 和 移动设备 上播放视频
官网、GitHub、下载demo
基本使用
<!doctype html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!-- 引入 -->
<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
</head>
<body>
<div class="video-wrap">
<video
id="my-player"
class="video-js"
controls
>
<p class="vjs-no-js">
要观看此视频，请启用JavaScript，并考虑升级到
<a href="https://videojs.com/html5-video-support/" target="_blank">
支持HTML5视频的web浏览器
</a>
</p>
</video>
</div>
<script>
// 配置
var options = {
playbackRates: [0.5, 1, 1.5, 2], // 设置倍速
fluid: true, // 自适应宽高
controlBar: {
fullscreenToggle: true,//显示全屏按钮，默认为true
pictureInPictureToggle: false,//隐藏画中画按钮，默认为true
volumePanel: false,//隐藏声音面板
currentTimeDisplay: true,//显示当前播放时间
timeDivider: true,//显示时间分割线
durationDisplay: true,//显示总时间
remainingTimeDisplay: false,//隐藏剩余时间，
}
aspectRatio: '1:1',
poster:'m.jpg', // 封面
};
var player = videojs('my-player', options, function onPlayerReady() {
videojs.log('Your player is ready!');
// 自动播放
this.play();
// 对视频播放完的一个事件监听
this.on('ended', function() {
videojs.log('视频播放完了? 干点什么呢...');
});
});
</script>
</body>
</html>
设置不全屏播放属性
解决方案：在video标签上设置属性
- 启用同层H5播放器
x5-video-player-type="h5" - 支持安装X5内核
x5-playsinline="true" - IOS 10及以上版本支持
playsinline="true" - IOS 10之前的版本支持
webkit-playsinline="true"
<video
id="my-video"
class="video-js vjs-big-play-centered"
controls
x5-video-player-type="h5"
x5-playsinline="true"
playsinline="true"
webkit-playsinline="true"
></video>
相关样式调整
// 播放按钮居中，默认在左上角；
class="video-js vjs-big-play-centered"
// 播放按钮修改为圆形显示
.vjs-big-play-centered .vjs-big-play-button{
margin-left: -0.81666em!important;
}
.video-js .vjs-big-play-button{
height: 1.63332em!important;
width: 1.63332em!important;
border-radius: 1.63332em!important;
}
// 暂停时也显示播放按钮
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
移动设备点击视频区域无法暂停问题
// 曲线救国的方式
// 点击bar上的暂停和播放图标
$('.vjs-control-bar').on('tap','.vjs-paused',function () {
vedio.play();
})
$('.vjs-control-bar').on('tap','.vjs-playing',function () {
vedio.pause();
})
// 点击视频区域, class状态来判断暂停还是播放
$('.video-wrap .vjs-paused').on('tap','#my-video_html5_api',function () {
vedio.pause();
})
$('.video-wrap .vjs-playing').on('tap','#my-video_html5_api',function () {
vedio.play();
})
// 点击bar上的全屏图标
$('.vjs-control-bar').on('tap','.vjs-fullscreen-control',function () {
vedio.enterFullScreen();
})
内容总结
以上是互联网集市为您收集整理的VideoJS的使用记录全部内容，希望文章能够帮你解决VideoJS的使用记录所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】