FEX

让web开发更迅速、简单。

您的位置:首页 - 效果类组件列表 - 效果类组件详情

视频背景组件(检测视频播放时间)

2017-10-17 10:32:27

说明 此插件用处

  • 支持微信端全屏视频(看不到视频播放等按钮,就是一整个屏幕)
  • 支持视频播放时间进度监测

来源

DEMO

注意:需要用移动端模拟touch事件才能点开视频。普通的click事件不支持。

http://test-zt.xoyo.com/dqx/videobg/index.html?pc_hash=OBQNWn

具体用法

$(function(){
    //支持微信“同层播放器”的视频播放器 不需要申请白名单 让视频内联播放
    $("#video").attr("x5-video-player-type", "h5");
    $("#video").attr("x5-video-player-fullscreen", "true");

    $(".begin").on("touchstart",function() {   //点击开始按钮时

        video.play();  //视频开始播放

    });
    $(".skip").on("touchstart",function() {  //点击跳过按钮时
    video.pause(); //视频暂停 
 })

  $('.replay').on("touchstart",function() {
    video.play();
  })
})


video.addEventListener('timeupdate', function (e) {
  console.log(video.currentTime) // 当前播放的进度  以秒为单位
})

video.addEventListener('ended', function (e) {
  // 播放结束时触发
  $('.skip').css('display','none')
  $('#o2_end').show();
})


document.getElementById('video').addEventListener("x5videoexitfullscreen", function(){
  //退出全屏
  alert("exit fullscreen")
})
document.getElementById('video').addEventListener("x5videoenterfullscreen", function(){
  //全屏
  alert("enter fullscreen")
}) 

原安卓下视频效果

shipin

使用插件后的效果

shipin

时间检测效果

shipin