易车专题视频插入方法

wanglinzhizhi Jan 21, 2017

易车专题视频插入方法

视频官网对于视频脚本做了修改，主要改动针对移动端

1 加入缩略图 (poster)

2 可以配置移动端视频地址以适应移动端视频播放 (mobileFileUrl)

前端开发部针对以上改动更新了专题中插入视频的方法

示例：http://admin.bitauto.com/editortest/zhangzhe/standard/video-test.html

PS：更新基于上一版，使用方法基本一致

详情说明：

1 引入线上视频脚本(也可下载到本地)

<script type="text/javascript" src="http://www.bitauto.com/zhuanti/adtopic/js/video20151009.js"></script>

2 主要js (如无需要，无需改动)

/*--在页面中插入视频--*/
var options = {
    "localUrl": " ",
    "width": "100%", 
    "height": "100%", 
    "id": "vplayer", 
    "playerUrl": "http://img1.bitautoimg.com/video/player/yiche1507021.swf",
    "videoId": 0,
    "playerType": 0,
    "autoPlay":false,
    "partnerVideoId": "",
    "poster":"",
    "mobileFileUrl": ""
};
function addVideo(videoBox,i){
    var vid = videoBox.eq(i).data("vid");
    var posterPic = videoBox.eq(i).data("poster");
    var mobi = videoBox.eq(i).data("mobi");
    options.poster = posterPic;
    options.localUrl = "http://v.bitauto.com/vbase/LocalPlayer/GetPlayVideo?videoid="+vid ;
    options.videoId = vid;
    options.mobileFileUrl = mobi;
    var player= BitautoVideo.GetPlayer(options);
    return player;
}
function playVideo(){
    var videoBox = $(".vid-box")
    videoBox.each(function(i){
        $(this).append(addVideo(videoBox,i))
    })
} 
playVideo()

PS：此代码在暂停和播放完毕时会有易车推荐视频模块，对于有需求的客户可以去掉,方法为将 playerUrl 值替换为 : http://img1.bitautoimg.com/video/player/yiche1507021.swf?showPauseUi=0&showEndUi=0

3 每个视频的DOM结构约定为：

<div class="vid-box" data-vid="442103" data-poster="http://img1.bitautoimg.com/newsimg-480-w0/Video/2016/12/18/20161218214335680.jpg" data-mobi="/2014/2016/12/18/fc94939fbef8f65a-sd.mp4"></div>

vid-box ：视频容器class (视频宽高默认为100%，所以视频表现大小为vid-box的大小)

data-vid ：视频ID

data-poster ：移动端缩略图地址 (pc视频可不写此属性)

data-mobi ：移动端视频地址 (pc视频可不写此属性)

4 一些特殊情况

以上是主要方法，但是在实际应用中，我们经常遇到选项卡视频的场景；
由于易车视频播放器没有暂停/播放的js接口，在播放过程中切换选项卡并不能暂停视频；
所以…思路是，在切换到对应的tab插时入对应的视频，同时删除上一个正在播放的视频节点，

在tab中做如下判断处理(下为示例，可根据实际情况改动)

//tab切换中的视频
function tab(obj){
    var videoBox = obj.find(".vid-box")
    videoBox.eq(0).addClass("playing")
    obj.find(".hd a").click(function(){
        var playing = $(".playing")
        var idx = $(this).index();
        $(".playing").removeClass("playing").children().remove()
        $(this).addClass("on").siblings("a").removeClass("on");
        if(videoBox.eq(idx).children().length>0){
            videoBox.eq(idx).addClass("playing")
        }else{
            videoBox.eq(idx).addClass("playing").append(addVideo(videoBox,idx));
        }
    })
}
tab($(".tab-video"))

by 雪松