0

I'm working on an online portfolio that requires user input to click through different videos. It works perfectly fine on a computer, but now I'm working on mobile and

  1. the muted, webm videos (Friend.webm, Resume.webm, Loading.webm and gmail.webm) don't seem to autoplay/work at all
  2. the videos that do work play full screen, even with playsinline in the tag

Below is the html: the website is http://yourfriendnoah.me Any help is appreciated!

<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>
Dougie Fresh
  • 27
  • 6

2 Answers2

0

Try:

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

Here is a link that should help you if it doesn't work: https://css-tricks.com/what-does-playsinline-mean-in-web-video/

Humza Din
  • 71
  • 7
0

I also had the same problem recently. The issue was to do with how certain devices (mainly apple devices) deal with videos that autoplay. Essentially they try to stop autoplaying videos becuase it is annoying for the mobile user apparently. I can see this becoming more of a problem for devices in the future... but for now, the below code worked for me

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

So for your autoplay video 'Friend.webm', you can try the following

<video preload="true" autoplay muted loop playsinline type="video/webm">
    <source src="Friend.webm" type="video/webm">
</video>
Dharman
  • 30,962
  • 25
  • 85
  • 135
Karl Withers
  • 41
  • 3
  • I tried updating to (just becase I wasn't sure if it should be at the source level or video level, but no luck so far it seems): – Dougie Fresh Dec 25 '20 at 22:46
  • What device and browser are you trying to test the autoplay feature on? – Karl Withers Dec 25 '20 at 22:49
  • I'm trying to get it to work on safari on an iphone. I only want the Friend.webm to autoplay, but it doesn't show up at all, and nor do the Resume.webm/Gmail/Loading. Thanks Karl – Dougie Fresh Dec 25 '20 at 22:52
  • Interesting, reading the Apple dev docs, what I suggested should work. The only exception being is if the device is in battery saver mode, then the video wont autoplay regardless. [Their dev docs on this are here](https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari) – Karl Withers Dec 25 '20 at 22:59
  • Got some mixed success but I definitely think your answer is in the right direction. Maybe its a webm issue? Which devices did you have the same issue with? – Dougie Fresh Dec 25 '20 at 23:06
  • Unfortunately we can only do the best we can do when developing websites. Its up to the browsers and what they do with the stuff we write :( I also had the same problem with iPhones and Safari. Using the code snippet above it did end up working for my client who reported the issue. I can't tell you what OS they were running though, all I know is that it was an iPhone running Safari too – Karl Withers Dec 25 '20 at 23:11
  • also ended up adding from this thread https://stackoverflow.com/questions/3970787/space-gaps-between-divs-on-website-when-viewed-on-iphone-ipad – Dougie Fresh Dec 25 '20 at 23:12
  • Did it help in getting the videos to play? On the page I had working I had the following `` – Karl Withers Dec 25 '20 at 23:17
  • It did with all the mp4s, but not with the webms. I'll try that as well and see if it helps. Thanks a ton Karl! – Dougie Fresh Dec 25 '20 at 23:31
  • Hmmm maybe it is an issue with the webm format. No problem though, glad to hear of progress :) – Karl Withers Dec 25 '20 at 23:36