让视频在 iphone/mobile 上内联工作

Question

我正在开发一个在线作品集，该作品集需要用户输入才能点击不同的视频。 它在电脑上工作得很好，但现在我在手机上工作，并且

1. 静音的 webm 视频（Friend.webm、Resume.webm、Loading.webm 和 gmail.webm）似乎根本无法自动播放/播放
2. 有效的视频会全屏播放，即使标签中有 playinline 也是如此

以下是html：网站是http://yourfriendnoah.me 任何帮助表示赞赏！

<html>
<html>
<head>
    <meta property="og:image" content="Thumnbnail.gif">
    <link rel=stylesheet type="text/css" href="grid.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="code.js"> </script>
</head>

<body style="background-color:black" align=center>
<div class="container">
    <img src="Clayvision.png" width=150% height=auto>
    <div id="load">
        <video id="loading" width=50% height=auto muted loop>
            <source src="Loading.webm" type="video/webm">
        </video>
    </div>
    <div id="video">
        <image id="black" src="Black.png" width=85% height=auto muted>
    </div>
    <div id="video">
        <video id="content" width=75% height=auto autoplay muted>
            <source src="Friend.webm" type="video/webm" preload="true">
        </video>
    </div>
    <div id="cv">
        <video id ="resume" width=50% height=auto muted>
            <source src="Resume.webm" type="video/webm">
        </video>
    </div>
    <div id="mail">
        <video id ="gmail" width=50% height=auto muted>
            <source src="gmail.webm" type="video/webm">
        </video>
    </div>
    <div id="hand">
        <video id ="control">
            <source src="hand1.webm" type="video/webm">
        </video> 
    </div>
    <div id="button1" class="grid"></div>
    <div id="button2" class="grid"></div>
    <a href='mailto: noahmreiner@gmail.com'>
        <div id="button4" class="grid2"></div>
    </a>
    <a href='https://docs.google.com/document/d/1E34NvJpD936OHYFO8byTiTBSl2k6mzQ-6IfT0OHSk7A/edit?usp=sharing' target="_blank">
        <div id="button3" class="grid2"></div>
    </a>
</div>
</body>

</html>

Answer 1

我最近也遇到了同样的问题。问题在于某些设备（主要是苹果设备）如何处理自动播放的视频。本质上，他们试图停止自动播放视频，因为这显然对移动用户来说很烦人。我可以看到这对未来的设备来说会成为一个更大的问题......但是现在，下面的代码对我有用

<video preload="true" autoplay muted loop playsinline type="video/mp4" id="teaser">
    <source src="assets/images/teaser-reel.mp4" type="video/mp4">
</video>

因此，对于您的自动播放视频“Friend.webm”，您可以尝试以下操作

<video preload="true" autoplay muted loop playsinline type="video/webm">
    <source src="Friend.webm" type="video/webm">
</video>

Answer 2

试试：

<video src="..." controls playsinline></video>

如果它不起作用，这里有一个链接可以帮助你： https://css-tricks.com/what-does-playsinline-mean-in-web-video/