Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

chrisj

Bronze Coder
On an html page, it uses this code:
HTML:
accept="video/*"
in this context:
HTML:
<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:
HTML:
<video autoplay="true" id="videoElement"></video>
I look forward to any comments/suggestions/guidance.
 
Much thanks for your reply. Yes, I have the marquee code, I'm just not sure how to "have the text in an absolute or fixed position div overlaying the video", could you provide some type of an example somehow with this included:

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

I look forward to any additional guidance. Thanks again
 
Say you have your marquee in the following code:

HTML:
<div class="marquee-holder">
    <marquee>My Text</marquee>
</div>

In CSS you can have:

CSS:
.marquee-holder {
    width: 100%;
    height: 30px;
    background-color: #000;
    color: #000;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

That CSS will fix a 30px high marquee to the bottom of the browser window.

You could also have a container for the video, give that a position: relative in CSS, then give the marquee holder a position: absolute and that lets you position the scrolling message in relation to another element, instead of in relation to the browser as a whole.
 
Many thanks for your kind reply.
I have tried this:
CSS:
.marquee {
width: 100%;
height: 400px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
color: #FF0000;
font-size: 25px;
font-family: arial, sans-serif;
}


HTML:
<div class="container">
<div class="row">
<label class="cameraButton">
<p class="lead"><h3>~ Simply Tap/Touch To Begin ~ </h3></p>
<p class="lead"><h6>- via mobile device -</h6></p>
<img src="/images/touch.png" alt="" style="background-repeat:no-repeat">
<form action="uploadMobile.php"  method="post" enctype="multipart/form-data">
<div class="marquee">
<marquee>
Your scrolling message goes here. Edit this message with your text.
</marquee>
</div>
<input type="file" name="fileToUpload" id="fileToUpload" accept="video/*" capture="user" onchange="submitForm();">
</label>
<input type="submit" value="Upload" name="submit" id="go" style="display: none;"/>
<br/>
</form>

It shows the scrolling across the html page, via mobile view, but when I tap the page, the mobile video camera screen appears successfully, but no scrolling across the screen.

Could you give me more direction in regard to this:
"You could also have a container for the video, give that a position: relative in CSS, then give the marquee holder a position: absolute and that lets you position the scrolling message in relation to another element, instead of in relation to the browser as a whole."
I'd like to give that a try.
Thanks again
 
Can you make a video of what you see in action? I suspect that the mobile video camera screen may be different from a standard HTML video and may be a part of the "browser chrome" so you wouldn't be able to overlay anything on top of it, just like you can't make a webpage element overlay the browser's address bar.
 
Thank you again for your reply. I really don't know how I'd record my mobile phone screen, for this. You may be right that "the mobile video camera screen may be different from a standard HTML video and may be a part of the "browser chrome" so you wouldn't be able to overlay anything on top of it'". So, in the meantime I have sent a message (conversation) to you with the .html code attached, in hope that you could upload it on your end and view it via mobile screen, and then give me some feedback. I look forward to hearing back from you. Thanks again.
 
I have created a link to the page that I'm asking about. Apparently it expires in 6 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.
 
Viewing that on my phone, the video capture window is my phone's default camera app, so it is outside of the browser entirely. There won't be any way to have a message over the capture window because it is outside of the browser.
 
Thanks for taking the time to view from your phone. Regarding "the video capture window is my phone's default camera app", can that be viewed on a web page in an iFrame, or some other way?
 
I recall receiving one from you and saying to myself I was going to check it later, but now I can't seem to find it. It was a link to some mobile app with video I believe, right?
 
Ok, so I took a look and I noticed that the app you referenced did not open the camera in a separate app and instead prompted a request from the browser for a request to access the camera. My guess is that they're using the canvas element to display the video, which since it's in the browser would allow an overlay. There's a help document from Google that explains how to capture video in this way:


It's a lot more complicated than the method you've been using though as you need to use the MediaRecorder API and custom Javascript to capture the video, but that would be the way to allow manipulation of browser elements on top of the video stream.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom