横向视频在手机垂直时全屏播放

发表于 更新于 分类于

通过监听window.orientation，让视频在手机上保持全屏播放

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="video-wrap">
    <video
        id="video"
        controls="false"
        x5-video-player-type="h5"
        x5-video-player-fullscreen='true'
        preload
        webkit-playsinline="true"
        playsinline
        x5-video-orientation="landscape"
        x5-video-player-type="h5"
    >
        <source src="//img.dxycdn.com/biz/topic_files/biz/lilai-onconnect-h5/dist/video/video.mp4" type="video/mp4" />
    </video>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.video-wrap {
    &.vertical {
        transform: translateX(-50%) translateY(-50%) rotate(90deg);
        position: absolute;
        top: 50%;
        left: 50%;
    }

    &.horizontal {
        width: 100%;
        height: 100%;
    }
}

#video {
    width: 100%;
    height: 100%;
}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const $video = $('.video-wrap')

changeVideoDirection(window.orientation)

// 监听屏幕旋转
window.addEventListener('orientationchange', function () {
  setTimeout(function () {
    changeVideoDirection(window.orientation)
  }, 300)
}, false)

/**
 * 视频自动播放
 * @return {[type]} [description]
 */
exports.videoAutoPlay = function () {
  const video = document.getElementById('video')
  video.play()
  // 兼容微信
  document.addEventListener('WeixinJSBridgeReady', function () {
    video.play()
  }, false)

  video.addEventListener('ended', function () {
    location.href = `${location.origin}/services/onconnect/form`
  })
}


/**
 * 修改视频播放角度
 * @param  {[type]} angle 0：竖屏 90：横屏
 * @return {[type]}       [description]
 */
function changeVideoDirection (angle) {
  if(angle == 0) {
    $video.removeClass('horizontal')
    $video.addClass('vertical')
    let clientW = document.body.clientWidth
    let clientH = document.body.clientHeight
    $video.width(Math.max(clientW, clientH))
    $video.height(Math.min(clientW, clientH))
  }else{
    $video.removeClass('vertical')
    $video.addClass('horizontal')
    $video.width('100%')
    $video.height('100%')
  }
}