使用开源video.js
项目地址：https://github.com/videojs/video.js
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
div.videocontent {
width:100%;
}
div.wrapper {
max-width:750px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="videocontent">
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="none" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>
</div>
</div>
</body>
</html>核心是设置视频比例：vjs-16-9 或者 vjs-4-3
视频居中class：vjs-big-play-centered