Possible to add scrolling text across the page/video-camera-screen?

chrisj · May 8, 2021, 8:45pm

On an html page, it uses this code:
accept="video/*"

in this context:
< input type = "file" name = "fileToUpload" id = "fileToUpload" accept = "video/*" capture = "user" onchange = "submitForm();" >

and when you view the page via mobile, and tap the page, your video camera screen appears. I’m looking to see if it’s possible to add scrolling text across the page/video-camera-screen ? like some type of overlay? I would image it may be possible on an html page that displays a web cam, with sometyhing like this:

< video autoplay = "true" id = "videoElement" ></ video >

I look forward to any comments/suggestions/guidance.

ErnieAlex · May 9, 2021, 2:32pm

Yes, you can do this if you use HTML5 video. I found this example online, but, have not tested it fully!
Might work for you…

.container { position:relative; }
.container video {
    position:relative;
    z-index:0;
}
.overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}
<div class="container">
    <video id="video" width="770" height="882" onclick="play();">
        <source src="video/Motion.mp4" type="video/mp4" />
    </video>
    <div class="overlay">
        <p>Content above your video</p>
        <form>
            <p>Content Below Your Video</p>
            <label for="input">Form Input Label</label>
            <input id="input" name="input" value="" />
            <button type="submit">Submit</button>
        </form>
    </div>
</div>

There are many other examples online if these do not work out for you. Good luck!

chrisj · May 11, 2021, 4:55pm

Thanks for your reply.
I have tried the code without success.
I have created a link to the page that I’m asking about. Apparently it expires in a few days. I’ve never used this temporary file hosting site/service before (tiiny.site), but it looks like it works currently. The html page I’m asking about is at : https://mobileview.tiiny.site/
I look forward to any additional comments/suggestions/guidance.

ErnieAlex · May 11, 2021, 5:24pm

Did you try it locally on your system? Do you have Wamp or Xamp set up? I noticed on the TINY-SITE that they had some CSS in place. That might be causing it to fail. Did you also load the video file to the site?

I will play with it later today and see if it works on my servers…

chrisj · May 11, 2021, 5:31pm

I am sorry I was not clear. The code suggested in your posted reply did not work for me.
The link: https://mobileview.tiiny.site/ viewed via mobile device works successfully. The only part that doesn’t work is when the page is “tapped” the scrolling text doesn’t appear over the video screen. If you;ve viewed the link via mobile device you can see what I’m talking about.

ErnieAlex · May 12, 2021, 1:34pm

Phones work totally different than other devices. Normally, you have to set up special coding for phones and set up special CSS to make them work the same as on a laptop or computer. On phones, it might be better to have the scrolling text at the top or bottom or both as it would not need to be layered then. Others have complained about loosing layers on a phone.

Since phones are smaller, do you really need the text layers over the video on a phone? Just curios how important that would be.