导航
导航
文章目录
  1. 视频去控件
  2. 视频内联播放
  3. 去控件全屏播放
  4. 视频自动播放
  5. 黑屏问题
  6. 视频居中
  7. 其他属性和方法

H5视频开发记录

微信里做页面的视频开发真的坑不少呀,把研究的结果做个备忘。

视频去控件

video::-webkit-media-controls,
    video::-webkit-media-controls-enclosure{
    display:none !important;
}

video::-webkit-media-controls-panel,
video::-webkit-media-controls-panel-container,
video::-webkit-media-controls-start-playback-button {
    display:none !important;
    -webkit-appearance: none;
}

视频内联播放

webkit-playsinline='true' playsinline='true'

iOS 10 之前的版本支持 webkit-playsinline,但是加了这个属性后,在 iOS 9 上出现只能听到声音不能看到画面的问题。

为了兼容ios8、9 需要再加上这个库 iphone-inline-video 一起使用。

IOS客户端需要在 Obj-C 里,webview设置allowsInlineMediaPlayback属性为YES

webview.allowsInlineMediaPlayback = YES;

去控件全屏播放

1、全屏实现:将video视频宽高设置为 100% (全屏)

2、去控件参照上面说的

3、针对x5内核可以给 video 设置两个属性 style='object-fit: fill' x5-video-player-type='h5' x5-video-player-fullscreen='true' x-webkit-airplay='true'

document.getElementById('video').addEventListener("x5videoexitfullscreen", function(){
    alert("exit fullscreen")
})

document.getElementById('video').addEventListener("x5videoenterfullscreen", function(){
    alert("enter fullscreen")
})

视频自动播放

需要注意

1、安卓上只有在 WeixinJSBridgeReady 这个事件下才能使视频自动播放。

document.addEventListener("WeixinJSBridgeReady", function () {
    document.getElementById('video').play()
    //document.getElementById('video').pause()
})

2、安卓上只有用户进行点击等触发事件才能播放视频,不可以在点击事件后设置 setimeout 控制视频多少秒后进行播放,不然会出现video的播放按钮(安卓下的默认样式),仍需用户点击才能播放。

3、video的层级默认最高,如需在video上添加封面等高于video层级的图层,需要将video的宽高设为0,播放视频时需要重新设置video的宽高。

document.getElementById('video').width(0).height(0)
document.getElementById('video').width(640).height(1040).get(0).play()

黑屏问题

ios 在播放视频时,会出现短暂的黑屏(透屏),再正常显示。

为了避免不正常显示,我们可以这样做:

在视频上层覆盖一个 使用视频第一帧的图片填充的“div 块”,制造播放假象 ,然后监听事件 timeupdate ,视频播放有画面时移除这个“div块”

video.addEventListener('timeupdate',function(){
    if(this.currentTime>=0.1){
        //移除
    }
})

视频居中

function handleResize() {
  var sWidth = 9
  var sHeight = 16
  var width = window.innerWidth
  var height = window.innerHeight
  var marginTop = height - (width * sHeight) / sWidth

  marginTop = Math.round(marginTop)
  if (marginTop < -2) {
    video.$wrapper.css('marginTop', marginTop / 2 + 'px')
  } else {
    video.$wrapper.css('marginTop', '0')
  }
}

其他属性和方法

video 支持的属性和事件很多,但在有些属性和事件在不同的系统上跟预想的表现不一致,在尝试比较之后,以下基本可以满足需求:

1、autoplay 属性

设置此属性,视频将自动播放。

2、preload 属性

规定是否预加载视频,如果设置了 autoplay 属性,则忽略该属性。

可能的值:

  • auto - 当页面加载后载入整个视频

  • meta - 当页面加载后只载入元数据

  • none - 当页面加载后不载入视频

3、timeupdate 事件

监听音频/视频(audio/video)的播放位置发生改变时触发。通常与 video.currentTime 一同使用

4、ended 事件

监听视频播放结束


ps.最终研究了那么多,还是去写了一个 逐帧视频-FrameByFrame 组件来实现需求 d=====( ̄▽ ̄*)b!

支持一下
扫一扫,支持一下