html5视频播放插件

对于HTML5提供的新特性，给前端开发者带来了巨大的激情与动力，减轻了开发者的代码累赘，大大提高了网站性能以及网页的渲染效果。对于低版本的浏览器，由于生产厂商的原因，许多PC端低版本的浏览器还不兼容HTML5提供的新特性，不过对于移动端的大部分浏览器都已支持HTML5的新特性了，运用官网提供的jQuery mobile插件，开发出移动设备上的web app，渲染效果也是极好的。

对于视频播放插件来说，HTML5提供了一个很好的特性:Video,并提供了很多标签属性，使用方法如下：

<video src="视频URL" controls="controls"></video>

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

一个简单的视频播放插件就OK了，让我们来试试。

<video src="http://consumer.huawei.com/cn/ucmf/groups/public/documents/consumer_video/huawei-mates-tvc-cn.mp4" controls="controls" autoplay="autoplay"></video>

当然，我们也可以自定义一个漂亮的视频播放插件，也可以把大牛们写好的漂亮插件直接拿来用，百度一下HTML5视频插件，会出现很多结果供你选择，在这里我用项目中用到的一个插件来举例，看看大牛们的插件是如何运用的。

首先，先把布局弄好，在页面中中放好一个视频。

<div class="video-item y-lists" video="HUAWEI-MATES-TVC-CN" data-video-id="1">
    <a class="a-2 img_link poster" name="consumer.huawei.com/cn/ucmf/groups/public/documents/webasset/hw_453469.jpg" alt="http://consumer.huawei.com/cn/ucmf/groups/public/documents/consumer_video/huawei-mates-tvc-cn.mp4" onclick="javascript:return true;"><img height="86" complete="complete" width="156" alt="HUAWEI Mate S广告视频" src="http://consumer.huawei.com/cn/ucmf/groups/public/documents/webasset/hw_453469.jpg"><div class="play"></div></a>
</div>

css样式如下：

.video-item {
        position: relative;
        float: left;
        width: 330px;
        height: 450px;
        margin: 15px 110px 15px 0;
        overflow: hidden;
        border-color: #EEEEEE;
        border-style: solid;
        border-width: 0 0 1px;
     }
     .video-item .poster {
        position: relative;
        width: 320px;
        height: 180px;
        cursor: pointer;
        background-size: 100% auto;
        background-repeat: no-repeat;
     }
     .a-2 {
        display: block;
        border: 2px solid #CCCCCC;
     }
     .video-item img {
        display: block;
        width: 320px;
        height: 180px;
     }
     .video-item .poster .play {
        position: absolute;
        top: 73px;
        left: 145px;
        width: 35px;
        height: 35px;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-image: url(http://consumer.huawei.com/cn/ucmf/groups/public/documents/webasset/img_con_cn_press_video_play.png);
     }
     .fancybox-overlay .fancybox-close {
        top: -45px;
        right: -45px !important;
        width: 50px;
        height: 50px;
        background-image: url(http://consumer.huawei.com/cn/ucmf/groups/public/documents/webasset/img_con_cn_press_video_close.png);
     }

好了，页面就放置了需要播放的视频了，下面就是如何运用视频插件来播放视频了

首先，我们需要引用几个视频播放插件的js文件

<script type="text/javascript" src="http://consumer.huawei.com/cn/ucmf/groups/public/documents/webasset/swfobject.js"></script>
<script type="text/javascript" src="http://consumer.huawei.com/cn/ucmf/groups/public/documents/webasset/jwplayer_cej.js"></script>
<a href="http://consumer.huawei.com/cn/ucmf/groups/public/documents/webasset/jwplayer_cej_flash.swf" name="forsspu"></a>
<link rel="stylesheet" href="http://consumer.huawei.com/cn/ucmf/groups/public/documents/webasset/css_con_cn_press_video.css" />  <!--视频插件样式-->
<script src="http://consumer.huawei.com/cn/ucmf/groups/public/documents/webasset/script_con_cn_press_video.js"></script>  <!--视频插件代码-->

然后，我们需要些点击事件，对视频进行播放

<script>
        function onClickVideo($this){
            var videoPath=$($this).attr("alt");                    
            var imgSrc=$($this).attr("name");
            var player = {
                id: "x-player",
                file: videoPath,
                image: imgSrc,
                aspectratio: "16:9",
                width: "100%",
                autostart: true,
                flashplayer:"http://consumer.huawei.com/en/ucmf/groups/public/documents/webasset/jwplayer_cej_flash.swf"
            };
            // Force using flash player in ie9
            if ($('html').hasClass('ie9')) {
                player.primary = 'flash';
            }
            var width = 960, height = 900;
            if (typeof (player.aspectratio) == 'string' && /^[0-9]{1,2}:[0-9]{1,2}$/.test(player.aspectratio)) {
                var ratio = player.aspectratio.split(':');
                height = width * parseInt(ratio[1]) / parseInt(ratio[0]);
            }
            $.fancybox('<div id="' + player.id + '" class="cbg-jwplayer"></div>', {
                width: width, height: height, padding: 0, margin: 40, autoSize: false, aspectRatio: true, scrolling: 'no',
                afterShow: function () {
                    try {
                        jwplayer(player.id).setup(player);
                    } catch (e) {
                        console.log(e);
                    }
                },
                afterClose: function () {}
            });
        }
        $(".video-item .poster").click(function(){
           onClickVideo($(this));
        })
    </script>

到此，一个完整的视频播放就OK了。

不兼容问题