html - mp4 视频无法在 iphone 上播放；盒子是空白的

Question

我有一个 mp4 视频，我想在我的网站 www.mylabzoe.com 上播放，但现在无法播放。之前一直在播放，现在不知什么原因停止了 =(。

我尝试将 type="mp4"更改为 type="H.264／AVC"。我需要更改视频的文件格式类型吗？我正在尝试制作这个，以便我可以在 PC、Iphone 和 Android 上播放它。我绝对想让它可以在手机上播放。

澄清一下，这可以在我的电脑上播放，但不能在我使用 sarai 或 chrome 的 iphone 上播放。

<video id="videofetch" controls>
    <source src="D_Videos\William_VS_Lab_Playing_Fetch.mp4" type="mp4">
    <source src="D_Videos\William_VS_Lab_Playing_Fetch.mp4" type="video/ogg">
</video>

#videofetch {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid white; 
    width: 12.5rem;
    height: auto;
}

/* 375 pixels */
@media (min-width: 23rem) {
    #videofetch {
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid white; 
        width: 12.5rem;
        height: auto;
    }
}

/* 425 pixels */
@media (min-width: 26rem) {
    #videofetch {
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid white; 
        width: 17.5rem;
        height: auto;
    }
}

/* 768 pixels */

@media (min-width: 48rem) {
    #videofetch {
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid white; 
        width: 22rem;
        height: auto;
    }
}

/* 1024 pixels */

@media (min-width: 64rem) {
    #videofetch {
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid white; 
        width: 22.5rem;
        height: auto;
    }
}

/* 1440 pixels */

@media (min-width: 90rem) {
    #videofetch {
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid white; 
        width: 30rem;
        height: auto;
    }
}
/* 2560 pixels */

@media (min-width: 160rem) {
    #videofetch {
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid white; 
        width: 32.5rem;
        height: auto;
    }
}

Answer 1

您在视频路径中使用了反斜杠 (\)。 Windows 倾向于使用反斜杠，但其他一切都更喜欢斜杠 (/)。另外，正确的类型是 video/mp4所以试试这个:

<video id="videofetch" controls>
    <source src="D_Videos/William_VS_Lab_Playing_Fetch.mp4" type="video/mp4">
    <source src="D_Videos/William_VS_Lab_Playing_Fetch.mp4" type="video/ogg">
</video>