VIDEOJS使用

1、引入js

2、填写标签

3、示例：

<div class="desc">
            <div class="about-us">
                <div class="about-us-content">
                    <h2 class="title">浪漫女神 · 天鹅之夜</h2>
                    <p>浪漫女神 · 天鹅之夜 创意构想：</p>
                    <p>女主人公亦有“天鹅姐姐”之美称而女人一生倾爱浪漫所以这次生日宴主题定为浪漫女神 · 天鹅之夜</p>
                </div>
            </div>
            <div class="lcwvide-container-lcw">
                <div class="lcwvide-wrap-lcw" style="left:0px;">
                    <div class="lcwvide-lcw" width="600" height="360">
                        <video id="example_video_1" class="lcwvideo-lcw-v video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="600" height="360" poster="./data/poster/huitongluhua.png" data-setup="{}">
                            <source src="./data/media/huitongluhua.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="lcwvide-lcw" width="600" height="360">
                        <video id="example_video_2" class="lcwvideo-lcw-v video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="600" height="360" poster="./data/poster/zhongxinyinhanghuodong.png" data-setup="{}">
                            <source src="./data/media/zhongxinyinhanghuodong.mp4" type="video/mp4">    
                        </video>
                    </div>
                    <div class="lcwvide-lcw" width="600" height="360">
                        <video id="example_video_3" class="lcwvideo-lcw-v video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="600" height="360" poster="./data/poster/falvjiangtan.png" data-setup="{}">
                            <source src="./data/media/falvjiangtan.mp4" type="video/mp4">    
                        </video>
                    </div>
                    <div class="lcwvide-lcw" width="600" height="360">
                        <video id="example_video_4" class="lcwvideo-lcw-v video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="600" height="360" poster="./data/poster/minggejiebaoshimiao.png" data-setup="{}">
                            <source src="./data/media/minggejiebaoshimiao.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="lcwvide-lcw" width="600" height="360">
                        <video id="example_video_5" class="lcwvideo-lcw-v video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="600" height="360" poster="./data/poster/dongfenrichangnengliangzaocan.png" data-setup="{}">
                            <source src="./data/media/dongfenrichangnengliangzaocan.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="lcwvide-lcw" width="600" height="360">
                        <video id="example_video_6" class="lcwvideo-lcw-v video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="600" height="360" poster="./data/poster/jiebaofabuhui.png" data-setup="{}">
                            <source src="./data/media/jiebaofabuhui.mp4" type="video/mp4">
                        </video>
                    </div>
                    <div class="lcwvide-lcw" width="600" height="360">
                        <video id="example_video_7" class="lcwvideo-lcw-v video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="600" height="360" poster="./data/poster/zhongxinyinhangqinzihuodong.png" data-setup="{}">
                            <source src="./data/media/zhongxinyinhangqinzihuodong.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
                <a href="javascript:;" class="arrow arrow_left">&lt;</a>
                <a href="javascript:;" class="arrow arrow_right">&gt;</a>
            </div>
        </div>

步骤2：

用js操作视频滚动

//video
    !function () {
        var wrap = $(".lcwvide-wrap-lcw");
        var next = $(".arrow_right")[0];
        var prev = $(".arrow_left")[0];
        next.onclick = function () {
            var videolcw = $(".lcwvideo-lcw-v");
            for(var i = 0;i<videolcw.length;i++){
                videolcw[i].childNodes[0].pause();
            }
            next_pic();
        }
        prev.onclick = function () {
            var videolcw = $(".lcwvideo-lcw-v");
            for(var i = 0;i<videolcw.length;i++){
                videolcw[i].childNodes[0].pause();
            }
            prev_pic();
        }
        function next_pic () {
            var newLeft;
            if(wrap[0].style.left === "-3600px"){
                newLeft = 0;
            }else{
                newLeft = parseInt(wrap[0].style.left)-600;
            }
            wrap[0].style.left = newLeft + "px";
        }
        function prev_pic () {
            var newLeft;
            if(wrap[0].style.left === "0px"){
                newLeft = -3600;
            }else{
                newLeft = parseInt(wrap[0].style.left)+600;
            }
            wrap[0].style.left = newLeft + "px";
        }

以上实现了视频滚动。

注意事项：

js的引入放到body最后。以避免出现加载问题。