問題描述
想讓MP4文件在手機端播放，是使用H5的video標簽，簡單直接，但是實際發(fā)現(xiàn)，在不同的手機、各種手機瀏覽器，APP，微信打開視頻頁面時，播放器的樣式都不一樣，如使用IOS系統(tǒng)的QQ瀏覽器，播放器懸浮了，全屏了，或者出現(xiàn)小窗口，反正每個手機都不一樣，安卓跟IOS又不一樣，第三方瀏覽器，UC QQ等又不一樣，沒有個標準。
一個兼容性比較好的方法
1.首先使用videojs，可以到官網(wǎng)看看怎么使用，這里不再描述
2.使用videojs后，發(fā)現(xiàn)跟使用video標簽一樣問題沒改善，請繼續(xù)下面3個步驟：
1.在videojs的頁面（如JSP）加入下面的樣式控制：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
含義請查看：http://www.itdecent.cn/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設(shè)置播放器樣式
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>initVideo();
<!-- 視頻樣式控制重點-->
setTimeout(function () {
initVideo();
},1000);
function initVideo() {
//動態(tài)計算視頻的高寬
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-->
<!--內(nèi)容區(qū)start-->
<link 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="http://cdn.bootcss.com/video.js/6.2.0/video.min.js"></script>
<!-- 視頻樣式控制重點 -->
<script src="http://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() {
//動態(tài)計算視頻的高寬
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>
<!--內(nèi)容區(qū)end-->
</div>
</body>
</html>
