h5-video-play v1.2.1

video播放组件

主要针对视频全屏、视频控制播放

使用

import 引入

安装

 npm install h5-video-play
 //or 
 year add h5-video-play

引用

import H5video from 'h5-video-play'
var video = new H5video('#videoContainer',{
    src : "./video.mp4",
})
video.play()

script资源引入

引入打包文件 ./dist/h5video.js

<script src="./dist/h5video.js"></script>
<script  type="text/javascript">
    var video = new H5video('#videoContainer',{
        src : "./video.mp4",
    })
</script>

new H5video(container,options)

注意： 1. ios中视频一致为内联播放，部分手机浏览器中弹出弹窗播放，如uc浏览器 2. options.canCover选项:默认false，设置内联播放，部分安卓机会自动全屏播放，视频元素上无法覆盖其他元素;true时，安卓设备在x5内核浏览器（如微信、qq）中，启用x5播放器播放，但仍会有弹窗效果，视频元素上可覆盖其他元素，视频播放结束后会隐藏video元素来退出x5播放器 3. options.iosInline选项： 默认false，部分ios浏览器全屏播放(如蜗牛客户端)；true时，视频需要点击其他元素控制播放，点击视频自身播放控件播放时其他方法回调失败。 4. 建议视频正常播放之前，先引导用户进行一次无意义的点击，执行play() pause()，进行一次视频的播放暂停,使视频在正式播放前预先加载 5. 设置video currentTime 时，currentTime超出缓存时间时会失败 6. 在安卓机中，不支持video和audio同时播放，大部分安卓机会暂停播放音频，视频暂停后继续播放；低版本安卓机部分浏览器导致视频黑屏，低版本中可设置禁止音频播放来避免。 7. 部分客户端中，滑动超出页面时，默认阻止视频播放，需阻止滑动默认事件。 8. 监听视频timeupdate事件时，timeupdate事件触发间隔较大，一般0.2秒左右触发一次。需监听视频播放精准位置的话需要手动实时监听视频currentTime

video.play()

控制视频播放

video.pause()

控制视频暂停

video.status()

返回视频当前状态。返回值： 'puased' 暂停; 'playing' 正在播放

video.currentTime(time)

获取/设置 视频当前播放位置 

video.onPlaying(callback)

视频开始播放且已出现画面是执行回调

video.onEnded(callback)

监听video播放结束事件，隐藏video元素，执行回调。