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

通过监听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
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%')
}
}
Disqus 加载中...

如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理