Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/89.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 为什么赢了';我的背景视频不能在移动视图中工作吗?_Html_Css_Debugging_Html5 Video - Fatal编程技术网

Html 为什么赢了';我的背景视频不能在移动视图中工作吗?

Html 为什么赢了';我的背景视频不能在移动视图中工作吗?,html,css,debugging,html5-video,Html,Css,Debugging,Html5 Video,我在谷歌上搜索过几次,看到过这个问题,但都没用,有人知道为什么我的视频背景不能在手机上播放吗 在浏览了无数的SO帖子之后,我在网上找到的文章/建议没有一篇适合我 我尝试过这个建议(),也就是说,但视频仍然无法在移动设备上播放 如何在移动视图中播放视频背景 <video playsinline autoplay loop muted> <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4"

我在谷歌上搜索过几次,看到过这个问题,但都没用,有人知道为什么我的视频背景不能在手机上播放吗

在浏览了无数的SO帖子之后,我在网上找到的文章/建议没有一篇适合我

我尝试过这个建议(),也就是说,但视频仍然无法在移动设备上播放

如何在移动视图中播放视频背景

<video playsinline autoplay loop muted>
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
<div class="container h-100">
    <div class="d-flex h-100 text-center align-items-center">
        <div class="w-100 text-white">
            <h1 class="display-3">Video Header</h1>
            <p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
        </div>
    </div>
</div>

你好`
世界
*{
边际:0px;
填充:0px;
}
.全屏{
位置:相对位置;
左:0px;
右:0px;
顶部:0px;
底部:0px;
背景尺寸:封面;
z指数:-1;
}
.视频
{
位置:绝对位置;
宽度:自动;
高度:自动;
最小高度:100%;
最小宽度:100%;
}

在我的设备上运行良好!你关闭了你的
video
标签了吗?我试着在JSFIDLE上调整它的大小,效果非常好。
video {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
}
<div class="fullScreen">
    <video src="Videos/v1.mp4" autoplay loop muted class="screenVideo">         
    </video>
</div>
<h2 style="background-color: rgba(255,2,2,0.5);width: 100%;height:;">Hello`</h2>
<h2 style="background-color: rgba(255,2,2,0.5);width: 100%;height: ;">World</h2>

<style>
   *{
        margin: 0px;
        padding:0px;
    }
    .fullScreen{
        position: relative;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        background-size: cover;     
        z-index: -1;
    }
    .screenVideo
    {
        position: absolute;
        width: auto;
        height: auto;
        min-height: 100%;
        min-width: 100%;
    }

</style>