让视频内联工作 iphone/mobile

Question

我正在制作一个在线作品集，需要用户输入才能点击不同的视频。它在电脑上工作得很好，但现在我在移动设备上工作并且

静音的 webm 视频（Friend.webm、Resume.webm、Loading.webm 和 gmail.webm）似乎根本 autoplay/work
有效的视频可以全屏播放，即使标签中有 playsinline 也是如此

下面是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 src="..." controls playsinline></video>

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

Answer 2

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

<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>

让视频内联工作 iphone/mobile

Getting Video to work inline for iphone/mobile

html

css

video

mobile