问题描述
想让MP4文件在手机端播放，是使用H5的video标签，简单直接，但是实际发现，在不同的手机、各种手机浏览器，APP，微信打开视频页面时，播放器的样式都不一样，如使用IOS系统的QQ浏览器，播放器悬浮了，全屏了，或者出现小窗口，反正每个手机都不一样，安卓跟IOS又不一样，第三方浏览器，UC QQ等又不一样，没有个标准。
一个兼容性比较好的方法
1.首先使用videojs，可以到官网看看怎么使用，这里不再描述
2.使用videojs后，发现跟使用video标签一样问题没改善，请继续下面3个步骤：
1.在videojs的页面（如JSP）加入下面的样式控制：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
含义请查看：https://www.jianshu.com/p/32f0761261b7
2.把播放按钮放在正中间：
<style>.video-js .vjs-big-play-button {
border-radius:50%;
width:2em;
height:2em;
line-height:1.8em;
margin-left: -1em;
margin-top: -1em;
}</style>
3.使用jquery设置播放器样式
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>initVideo();
<!-- 视频样式控制重点-->
setTimeout(function () {
initVideo();
},1000);
function initVideo() {
//动态计算视频的高宽
var max_height =350;
var max_width =644;
var ratio =max_height /max_width;
var width =$(window).width() *0.95;
var height =width *ratio;
if (width >max_width) {
width =max_width;
}
if (height >max_height) {
height =max_height;
}
var options = {
'width':width +"px",
'height':height +"px"
};
var player =videojs('videoDiv', {fluid:true},options);
var widthStr =width +"px";
var heightStr =height +"px";
$(".videoDiv-dimensions").css("width",widthStr);
$(".videoDiv-dimensions").css("height",heightStr);
}</script>
var player =videojs('videoDiv', {fluid:true},options);中的videoDiv为你video的id
下面附完整例子，需要自己替换视频url文件：
<html>
<head>
<meta charset="utf-8"/>
<!-- 视频样式控制重点 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>测试</title>
</head>
<body>
<div class="main">
<!--首图的位置start-->
<!--首图的位置end-->
<!--内容区start-->
<link href="//cdn.bootcss.com/video.js/6.2.0/alt/video-js-cdn.min.css" rel="stylesheet"/>
<style>.video-js .vjs-big-play-button {
border-radius:50%;
width:2em;
height:2em;
line-height:1.8em;
margin-left: -1em;
margin-top: -1em;
}</style>
<script src="//cdn.bootcss.com/video.js/6.2.0/video.min.js"></script>
<!-- 视频样式控制重点 -->
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<video id="videoDiv" class="video-js vjs-big-play-centered" controls="" data-setup="{}"
poster="https://XXX">
<source src="https://XXX"
type="video/mp4"/>
</video>
<script>initVideo();
<!-- 视频样式控制重点-->
setTimeout(function () {
initVideo();
},1000);
function initVideo() {
//动态计算视频的高宽
var max_height =350;
var max_width =644;
var ratio =max_height /max_width;
var width =$(window).width() *0.95;
var height =width *ratio;
if (width >max_width) {
width =max_width;
}
if (height >max_height) {
height =max_height;
}
var options = {
'width':width +"px",
'height':height +"px"
};
var player =videojs('videoDiv', {fluid:true},options);
var widthStr =width +"px";
var heightStr =height +"px";
$(".videoDiv-dimensions").css("width",widthStr);
$(".videoDiv-dimensions").css("height",heightStr);
}</script>
<!--内容区end-->
</div>
</body>
</html>
