其他分享
首页 > 其他分享> > VideoJS的使用记录

VideoJS的使用记录

作者：互联网

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标签上设置属性

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

标签：function,视频,play,记录,vjs,video,使用,true,VideoJS
来源： https://www.cnblogs.com/yuxi2018/p/14615626.html