视频播放插件Video.js

在网页开发过程中,难免会用到video标签,然鹅video标签的默认样式实在不敢恭维,那如何实现视频播放的样式呢?

首先引入:

<link href="css/video-js.min.css" rel="stylesheet">

<script src="js/video.min.js"></script>

HTML代码:

<video id="my-video" class="video-js" controls preload="auto" width="740" height="400"
  poster="m.png" >
<source src="http://sucai.gxyourui.cn/cf7c21429a27e24bb0dbe547778a058c.mp4" type="video/mp4">

</video>

javscript代码:

<script type="text/javascript">
var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
myPlayer.play();
});

</script>

效果如下图: