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;
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();
})