uni-app中 objectFit:'fill' 设置了不起作用宽屏幕无法拉伸铺满全屏

uni-app中 objectFit:‘fill’ 设置了不起作用宽屏幕无法拉伸铺满全屏

产品分类	版本号	手机系统	手机系统版本号	手机厂商	手机机型	打包方式
HTML5+	3.2.12	Android	Android 7.1.1	模拟器	夜神	云端

示例代码：

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
        <meta name="HandheldFriendly" content="true"/>  
        <meta name="MobileOptimized" content="320"/>  
        <title>Hello H5+</title>  
        <script type="text/javascript" src="../js/common.js"></script>  
        <script type="text/javascript">  
var video = null;  
var playing = false;  
// H5 plus事件处理  
function plusReady(){  
    // 创建视频播放控件  
    video = new plus.video.VideoPlayer('video',{  
        src:'../video/bee.mp4'  
    });  
    video.addEventListener('play', function(){  
        updatePlaying(true);  
    }, false);  
    video.addEventListener('pause', function(){  
        updatePlaying(false);  
    }, false);  
    video.setStyles({objectFit:'fill', loop:true, autoplay:true,controls:true});  
    video.play();  
}  
document.addEventListener('plusready', plusReady, false);  
// 播放  
function playVideo1() {  
    var path = document.getElementById('path1').value;  
    if(path&&path.length>0) {  
        video.setOptions({src:path});  
        video.setStyles({objectFit:'fill', loop:true, autoplay:true,controls:true});  
        video.play();  
        console.log('mm');  
    }  
}  
function danmuVideo(){  
    console.log('tm');  
}  
function playVideo2() {  
    var path = document.getElementById('path2').value;  
    if(path&&path.length>0) {  
        video.setOptions({src:path});  
        video.play();  

    }  
}  
function updateVideo() {  

    danmuVideo();  
}  
// 更新为播放状态  
function updatePlaying(play) {  
    playing = play;  
    document.getElementById('pp').innerText = playing?'暂停':'播放';  
}  
// 播放/暂停  
function ppVideo() {  
    playing?video.pause():video.play();  
}  
// 全屏  
function fullscreenVideo() {  
    video.requestFullScreen(-90);  
}  
// 切换倍速  
var ri = 2;  
var ra = [0.5,0.8,1.0,1.25,1.5,2];  
function switchRate() {  
    ri++;  
    if(ri>=ra.length){  
        ri = 0;  
    }  
    video.playbackRate(ra[ri]);  
    document.getElementById('rate').innerText = '切换倍速('+ra[ri]+')';  
}  
// 创建子创建覆盖在视频控件上  
var wsub = null;  
function createSubview(){  
    if(!wsub) {  
        var topoffset = document.getElementById('video').offsetTop;  
        wsub=plus.webview.create('video_videoplayer_sub.html','sub',{top:topoffset,height:'300px',position:'static',scrollIndicator:'none',background:'transparent'});  
        plus.webview.currentWebview().append(wsub);  
    }  
    wsub.isVisible()?wsub.hide():wsub.show();  
}  
        </script>  
        <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>  
        <style type="text/css">  
input {  
    width:70%;  
    font-size: 16px;  
    padding: .2em .2em;  
    border: 1px solid #00B100;  
    -webkit-user-select: text;  
}  
button {  
    width:20%;  
    margin:6px 0 6px 6px;  
    font-size: 16px;  
    color: #FFF;  
    background-color: #00CC00;  
    border: 1px solid #00B100;  
    padding: .2em 0em;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
}  

        </style>  
    </head>  
    <body>  
        <br/>  
        <div id="video" style="width:98%;height:300px;background-color:#000000;margin:auto"></div>  
        <br/>  
        <div style="text-align:center; margin:auto;">  
            <input id="path1" type="text" value="https://mp4.vjshi.com/2021-09-26/0a22153dbd4f42598325396c459f0160.mp4" placeholder="请输入视频地址，支持mp4/flv格式"/>  
            <button onclick="playVideo1()">播放</button>  
            <br/>  
            <input id="path2" type="text" value="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" placeholder="请输入视频地址，支持rtmp直播"/>  
            <button onclick="playVideo2()">直播</button>  
        </div>  
        <div id="pp" class="button" onclick="ppVideo()">播放</div>  
        <div class="button" onclick="fullscreenVideo()">全屏</div>  
        <div id="rate" class="button" onclick="switchRate()">切换倍速(1)</div>  
        <div class="button" onclick="updateVideo()">更新direction</div>  
        <div class="button" onclick="createSubview()">控件上内容显示/隐藏</div>  
    </body>  
</html>

操作步骤：

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
        <meta name="HandheldFriendly" content="true"/>  
        <meta name="MobileOptimized" content="320"/>  
        <title>Hello H5+</title>  
        <script type="text/javascript" src="../js/common.js"></script>  
        <script type="text/javascript">  
var video = null;  
var playing = false;  
// H5 plus事件处理  
function plusReady(){  
    // 创建视频播放控件  
    video = new plus.video.VideoPlayer('video',{  
        src:'../video/bee.mp4'  
    });  
    video.addEventListener('play', function(){  
        updatePlaying(true);  
    }, false);  
    video.addEventListener('pause', function(){  
        updatePlaying(false);  
    }, false);  
    video.setStyles({objectFit:'fill', loop:true, autoplay:true,controls:true});  
    video.play();  
}  
document.addEventListener('plusready', plusReady, false);  
// 播放  
function playVideo1() {  
    var path = document.getElementById('path1').value;  
    if(path&&path.length>0) {  
        video.setOptions({src:path});  
        video.setStyles({objectFit:'fill', loop:true, autoplay:true,controls:true});  
        video.play();  
        console.log('mm');  
    }  
}  
function danmuVideo(){  
    console.log('tm');  
}  
function playVideo2() {  
    var path = document.getElementById('path2').value;  
    if(path&&path.length>0) {  
        video.setOptions({src:path});  
        video.play();  

    }  
}  
function updateVideo() {  

    danmuVideo();  
}  
// 更新为播放状态  
function updatePlaying(play) {  
    playing = play;  
    document.getElementById('pp').innerText = playing?'暂停':'播放';  
}  
// 播放/暂停  
function ppVideo() {  
    playing?video.pause():video.play();  
}  
// 全屏  
function fullscreenVideo() {  
    video.requestFullScreen(-90);  
}  
// 切换倍速  
var ri = 2;  
var ra = [0.5,0.8,1.0,1.25,1.5,2];  
function switchRate() {  
    ri++;  
    if(ri>=ra.length){  
        ri = 0;  
    }  
    video.playbackRate(ra[ri]);  
    document.getElementById('rate').innerText = '切换倍速('+ra[ri]+')';  
}  
// 创建子创建覆盖在视频控件上  
var wsub = null;  
function createSubview(){  
    if(!wsub) {  
        var topoffset = document.getElementById('video').offsetTop;  
        wsub=plus.webview.create('video_videoplayer_sub.html','sub',{top:topoffset,height:'300px',position:'static',scrollIndicator:'none',background:'transparent'});  
        plus.webview.currentWebview().append(wsub);  
    }  
    wsub.isVisible()?wsub.hide():wsub.show();  
}  
        </script>  
        <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>  
        <style type="text/css">  
input {  
    width:70%;  
    font-size: 16px;  
    padding: .2em .2em;  
    border: 1px solid #00B100;  
    -webkit-user-select: text;  
}  
button {  
    width:20%;  
    margin:6px 0 6px 6px;  
    font-size: 16px;  
    color: #FFF;  
    background-color: #00CC00;  
    border: 1px solid #00B100;  
    padding: .2em 0em;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
}  

        </style>  
    </head>  
    <body>  
        <br/>  
        <div id="video" style="width:98%;height:300px;background-color:#000000;margin:auto"></div>  
        <br/>  
        <div style="text-align:center; margin:auto;">  
            <input id="path1" type="text" value="https://mp4.vjshi.com/2021-09-26/0a22153dbd4f42598325396c459f0160.mp4" placeholder="请输入视频地址，支持mp4/flv格式"/>  
            <button onclick="playVideo1()">播放</button>  
            <br/>  
            <input id="path2" type="text" value="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" placeholder="请输入视频地址，支持rtmp直播"/>  
            <button onclick="playVideo2()">直播</button>  
        </div>  
        <div id="pp" class="button" onclick="ppVideo()">播放</div>  
        <div class="button" onclick="fullscreenVideo()">全屏</div>  
        <div id="rate" class="button" onclick="switchRate()">切换倍速(1)</div>  
        <div class="button" onclick="updateVideo()">更新direction</div>  
        <div class="button" onclick="createSubview()">控件上内容显示/隐藏</div>  
    </body>  
</html>

预期结果：

objectFit:‘fill’,设置后视频可以拉伸铺满全屏


### 实际结果：


objectFit:'fill',设置后不起作用

bug描述：

当遇到宽屏幕的时候，objectFit:'fill',设置了不起作用，没办法拉伸视频，两边留有黑边

更多关于uni-app中 objectFit:'fill' 设置了不起作用宽屏幕无法拉伸铺满全屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 1楼

用的5+里边的案例，官方可以试下确定是BUg

更多关于uni-app中 objectFit:'fill' 设置了不起作用宽屏幕无法拉伸铺满全屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 2楼

望及时修复下以便适配不同屏幕

gougou168 3楼

宽屏两边黑边

yuanlaile 4楼

有没有官方能解决一下，我也碰到这个问题，在电视机上使用，设置填充无效。还是会有黑边@DCloud_heavensoft @DCloud_Android_ST @DCloud_Android_DQQ

sinazl 5楼

本来使用的是uniapp的video，但是在播放四个监控，会有三个一直在缓冲，换成html5+的videoPlaye可以四个同时加载出来，但是又有无法填充问题。着急上线

songsunli 6楼作者

有其他解决方案吗

nodeper 7楼

官方能不能回个话啊！

vueper 8楼

我现在看看

sinazl 9楼

bug 已确认，稍后版本会修复此问题

itying888 10楼

问一下，下一版本的时间是什么时候

nodeper 11楼

回复浙江小牛寻宝: 暂无确定时间，毛毛估一周内。

sinazl 12楼

HX 3.3.1 alpha bug已修复

eggper 13楼

从你的代码来看，你使用的是HTML5+ API中的plus.video.VideoPlayer控件，而不是uni-app的video组件。这两者虽然功能相似，但API和实现方式有差异。

在HTML5+的VideoPlayer控件中，objectFit属性可能不被支持或支持有限。根据HTML5+官方文档，VideoPlayer的样式设置主要通过setStyles方法，但objectFit属性可能只在部分平台或特定版本下有效。

针对你遇到的问题，可以尝试以下解决方案：

检查平台兼容性：HTML5+的VideoPlayer在不同Android版本和厂商设备上可能存在兼容性问题。你使用的Android 7.1.1模拟器可能不支持objectFit:'fill'属性。
使用全屏模式适配：在全屏模式下，可以尝试设置不同的方向参数。你代码中的video.requestFullScreen(-90)使用了-90参数，可以尝试其他值：
```
video.requestFullScreen(0); // 默认方向
video.requestFullScreen(90); // 旋转90度
```

uni-app中 objectFit:'fill' 设置了不起作用 宽屏幕无法拉伸铺满全屏

示例代码：

操作步骤：

预期结果：

bug描述：

uni-app中 objectFit:'fill' 设置了不起作用宽屏幕无法拉伸铺满全屏