浅浅的实现一下html5的＜video＞

admin 发布于：2014-07-15 11:29:00

阅读：loading

记得前段时间要实现一个视频播放的功能，要支持视频列表轮播的功能，基于浏览器的<object>标签和jquery.flash插件相关的实现，我在网上看了下，我是基本无法实现这个功能（准确的说是无法获取到视频播放完成后的一些事件），不过也可能是我这块了解的少了，有别的实现但是我不知道吧，废话少说。
这几天看了下html5的video相关的资料，发现对于前几天的那个功能来说，问题不大，今天特地实践了一下，如下则是相关的总结。
关于<video />标签我们关心属性的多一点的是：是否自动播放、是否重复播放、宽度、高度、控制栏（包括播放、暂停、播放进度、时间、声音等）、视频加载或者播放前显示的图片、视频的地址等，当然还有别的属性，就不在多说了，基本的应用中用到的也就是这些了。剩下的关注的多点的就是它的事件了。
本例子中实现的视频轮播效果实现较简单，详细描述来说就是：页面加载完成之后，默认按先后顺序开始播放视频，当每播放一个视频的时候，要将焦点切换到与此视频相对应的图片上，当最后一个视频播放完成之后，则不再重复播放；当手动点击图片时，播放与此图片相对应的视频，播放完成之后，不再继续播放下一个视频。总的来说，实现的还是比较简单。
实现源代码比较简单，如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>html5 video</title>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(function() {
        /*初始化默认播放列表*/
        $("#myVideo").html5Video({
            width : "500px",
            height : "300px",
            datas : [ {
                src : "1.mp4"
            }, {
                src : "2.mp4"
            }, {
                src : "3.webm"
            } ]
        });

    });

    (function($) {
        /**
         * 视频列表播放组件
         * 将html5的video标签简单封装，部分属性让调用者更关心是true或者false即可
         */
        $.fn.html5Video = function(options) {
            var thisElement = $(this);
            var defaults = {
                width : "auto",
                height : "auto",
                controls : true,//如果为true，设置此属性，如果为false则删除此属性
                loop : false,//一组视频是否轮播，如果为单个循环播放则会忽略播放完成事件
                poster : "",//加载视频时或者未播放时显示的图片
                autoplay : true,//是否自动播放
                datas : [ {
                    src : ""
                } ]
            };

            var options = $.extend(defaults, options);

            this.each(function() {
                var video = "<video width=\"" + options.width + "\" height=\""
                        + options.height + "\" ";
                //添加控制栏
                if (options.controls == true) {
                    video += " controls = \"controls\" ";
                }
                //添加是否轮播
                if (options.loop == true) {
                    video += " loop = \"loop\" ";
                }
                //判定预加载图片
                if (options.poster != null && options.poster != "") {
                    video += " poster = '" + options.poster + "' ";
                }
                //判定是否自动播放
                if (options.autoplay == true) {
                    video += " autoplay = \"autoplay\" ";
                }

                var video_id = thisElement.attr("id") + "_video";
                if (options.datas.length > 1) {
                    //添加完基本属性之后，处理视频播放完毕后的事件，即，播放下一个视频
                    video += " src=" + options.datas[0].src;
                    video += " id='" + video_id + "' ";
                } else {
                    //如果视频播放的个数小于1，则只播放当前的即可
                    video += " src=" + options.datas[0].src;
                }

                video += " />";
                thisElement.empty().append(video);

                var currentIndex = 0;
                var videoObj = document.getElementById(video_id);
                if (videoObj != null) {
                    videoObj.addEventListener("ended", function(e) {
                        var datas = options.datas;
                        currentIndex = currentIndex + 1;
                        videoObj.src = datas[currentIndex].src;
                        videoObj.load();//重新加载下一个视频

                        /*************/
                        changeBorder(currentIndex);
                        /*************/

                        //如果当前播放的为最后一个视频，则不再继续播放
                        if (currentIndex == datas.length - 1) {
                            videoObj.removeEventListener("ended");
                        }
                    });
                }
            });
        };

    })(jQuery);

    function changeVideo(obj, currentIndex, src) {
        //如果当前点击的元素等于当前播放的视频，则不再重新播放
        if (obj != null) {
            var flag = $(obj).css("cursor") == "default" ? true : false;
            if (flag) {
                return;
            }
        }

        var videoObj = document.getElementById("myVideo_video");
        videoObj.src = src;
        videoObj.load();//重新加载下一个视频

        changeBorder(currentIndex);

    }

    function changeBorder(currentIndex) {
        /*************/
        $(".imgBox ul li").removeClass();
        $(".imgBox ul li").eq(currentIndex).addClass("border_default");
        /*************/
    }
</script>
<style type="text/css">
.video_box {
    background-color: red;
    margin: 10px auto;
}

.video {
    float: left;
}

.imgBox {
    float: left;
}

.imgBox ul {
    list-style: none;
}

.imgBox ul li {
    height: 80px;
    padding: 5px;
}

.border_default {
    border: 10px solid red;
    cursor: default !important;
}
</style>
</head>

<body>

    <br />
    <div class="video_box">
        <!-- 视频播放元素 -->
        <div id="myVideo" class="video" align="center"></div>
        <!-- 手动点击切换 -->
        <div class="imgBox">
            <ul>
                <li style="cursor: pointer;"
                    onclick="changeVideo(this , 0 , '1.mp4')" class="border_default"><img
                    src="1.png" border="0" width="150" height="80" index="0" />
                </li>
                <li style="cursor: pointer;"
                    onclick="changeVideo(this , 1 , '2.mp4')"><img src="2.png"
                    border="0" width="150" height="80" index="1" />
                </li>
                <li style="cursor: pointer;"
                    onclick="changeVideo(this , 2 , '3.webm')"><img src="3.png"
                    border="0" width="150" height="80" index="2" />
                </li>
            </ul>
        </div>
    </div>
</body>
</html>