问题:
直接通过video播放视频时,iOS会自动全屏。Android上浏览器正常,但Android中QQ、weichat内嵌浏览器自动全屏。
需求:
video播放视频时能够自动播放且不全屏,需适配大部分机型
探索过程:
1、使用内联播放属性:webkit-playsinline、playsinline
解决了iOS上视频自动全屏问题,但是这个属性在Android中的qq和wechat上无效
原因:内联属性,需要嵌入网页的APP比如 WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,才能生效
2、使用canvas播放video
在iOS上video不能自动播放,是要求必须有用户的真实操作来触发播放。并且在微信内置浏览器中会出现白屏问题,可能是由于微信禁止canvas的自动drawImage绘制
解决方法:添加预览图
解决方案:
通过canvas绘制video,并添加预览图
注意:外部需要添加video.mp4和preview.png资源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>demo</title>
<script src="jquery-3.3.1.js"></script>
</head>
<style type="text/css">
canvas {
width: 100%;
height: 100%;
}
video {
display: none;
}
</style>
<body>
<!--
object-fit: fill 视频内容充满整个video容器
webkit-playsinline、playsinline 内联播放
x5-video-player-type="h5" 启用x5内核H5播放器,是wechat安卓版特性
x5-video-player-fullscreen="true" 全屏设置 true为防止横屏
playsinline="true" iOS微信浏览器支持小窗内播放
-->
<video style="position:relative; object-fit:fill;" loop id="myVideo"
x5-video-player-type="h5"
x5-video-orientation="h5"
x5-video-player-fullscreen="true"
x-webkit-airplay="true"
x5-playsinline="true"
webkit-playsinline="true"
playsinline="true"
src="video.mp4">
</video>
<canvas id="myCanvas"></canvas>
<img src="preview.png" id="poster" style="display:none">
</body>
</html>
<script>
var video=document.getElementById('myVideo');
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.width = window.innerWidth * 2.5; //获取屏幕宽度作为canvas的宽度 这个设置的越大,画面越清晰(相当于绘制的图像大,然后被css缩小)
canvas.height = window.innerHeight;
context.drawImage(poster, 0, 0, canvas.width, canvas.height) // canvas上绘制poster图片,也可以点击播放后隐藏图片无需绘制
video.play()
var timer = setInterval(function(){ // 绘制视频
context.drawImage(video, 0, 0, canvas.width, canvas.height)
},40)
var isplay=false // 视频播放状态
$('#myCanvas').on('touchstart',function(e){
if(!isplay) { // 暂停
// 解决 由于iOS上视频不能自动播放,导致第一次需要点击两次才能播放视频的问题
if (video.paused) {
isplay=false
video.play()
} else {
isplay=true
video.pause()
}
} else { // 开始播放
video.play()
isplay=false
}
})
</script>