Giter Site home page Giter Site logo

Comments (12)

chrisdavidmills avatar chrisdavidmills commented on May 25, 2024 1

Hi there,

There is bound to be some code in here to help you:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs

Basically, you need a video element:

<video src="myVideo.mp4">

And a button

<button>Play</button>

And some code to wire up the button to the video

let videoElem = document.querySelector('video');
let playBtn = document.querySelector('button');

playBtn.addEventListener('click', function() {
  videoElem.play();
})

If you want to make the button look nice, for example overlaying on top of the video, you'll need to use some CSS to style it, perhaps some absolute positioning to position it on the top?

Hope this helps.

from learning-area.

chrisdavidmills avatar chrisdavidmills commented on May 25, 2024 1

This worked fine for me:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VR Salud</title>
   <style>
   html, body { margin: 0; padding:0; overflow: hidden; }
   h1 { color:white; position:absolute; top:95%; z-index:100; width:100%; text-align: center;; transform: translate(0,-100%); font-family: 'Raleway', sans-serif; font-weight: 100; letter-spacing: 1px; text-transform: lowercase; font-size: 30px; }
</style>
  </head>
  <body>
    <video width="640" height="320" autoplay loop>
    <source src="rabbit320.mp4" type="video/mp4">
<p>Your browser doesn't support HTML5 video.</p>
</video>

<button>Play</button>

<script> let videoElem = document.querySelector('video'); let playBtn = document.querySelector('button'); playBtn.addEventListener('click', function() { videoElem.play(); }); </script>
  </body>
</html>

It was probably the video format — I don't think we support WebM any more, and you can play mp4 anywhere.

from learning-area.

chrisdavidmills avatar chrisdavidmills commented on May 25, 2024 1

I think this is just because your video is too big and so is pushing the button offscreen?

You could get the button onscreen easily by just putting it before the video in the source order.

Or you could use absolute positioning to position it over the video, for example

button {
  position: absolute;
  top: 0;
  left: 0;
}

by default, absolute position positions elements relative to the <body> element. If you want to have them positioned relative to a different element, you'll need to nest them inside that element, and make sure that element has positioning set on it (like relative), so that the positioning context becomes that element, and not the body element.

So for example:

<div class="container">
  <video width="640" height="320" autoplay loop>
    <source src="rabbit320.mp4" type="video/mp4">
  <p>Your browser doesn't support HTML5 video.</p>
  </video>
  <button>Play</button>
</div>

And some CSS:

.container {
  position: relative;
}

button {
  position: absolute;
  top: 0;
  left: 0;
}

The video would then site inside the container, and the button would be positioned relative to the container's edges, regardless of there the container ends up on the page.

from learning-area.

chrisdavidmills avatar chrisdavidmills commented on May 25, 2024 1

The correct properties to use are top, bottom, left, right.

The following tutorial should help:

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

from learning-area.

castana1962 avatar castana1962 commented on May 25, 2024

Hi chrisdavidmills
I will try it !!!
Thank you for your help !!!
Alejandro

from learning-area.

castana1962 avatar castana1962 commented on May 25, 2024

Hi chrisdavidmills,
Sorry again for my ignorance but I added what you told me and it is not working for me. I cannot the Play button in my background. Surely, I am making a mistake...Could you help me to fix it? Thanks for your time
My code is the following

`

 <title>VR Salud</title>
    <style>
		html, body { margin: 0; padding:0; overflow: hidden; }
		h1 { color:white; position:absolute; top:95%; z-index:100; width:100%; text-align: center;; transform: translate(0,-100%); font-family: 'Raleway', sans-serif; font-weight: 100; letter-spacing: 1px; text-transform: lowercase; font-size: 30px; }
		#videoBacker {  background-size: cover; object-fit: cover; z-index: 9; opacity:.3; position: absolute; top:0px; left:0px; width:100vw; height: 100vh; transition: 1s opacity ease-in-out;

}

</style> 
  <video width="1920" height="1080" controls autoplay loop>
      <source src="Hexxcaudio.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="Hexxcaudio.webm">link to the video</a> instead.</p>
</video>

<button>Play</button>
<script> let videoElem = document.querySelector('video'); let playBtn = document.querySelector('button'); playBtn.addEventListener('click', function() { videoElem.play(); }); </script> `

from learning-area.

castana1962 avatar castana1962 commented on May 25, 2024

Hi again
Great !!!
It is working well if I add the 640 x 320 px ( I can see the Play button and see the video and audio)
I do not want to abuse of your generosity but since that my video is 1920 x 1080, px ( I cannot the Play button). for it, Do you know how I could add the Play button above the video and click the button to see it? Would it be possible? One more time, thanks for your help. Alejandro

from learning-area.

castana1962 avatar castana1962 commented on May 25, 2024

Hi
It is working !!
I did what you told me and also linked the CSS file in my index.htmI file with the following code

Is it correct? Now I can see the button over the video now but this one is in the container edges ( Top 0, Down 0) I changed the top and down values but I cannot see it anymore, for it, Could you say me what is the correct CSS file code to move the button? Thanks for your help and your patience... Best Regards

from learning-area.

castana1962 avatar castana1962 commented on May 25, 2024

Hello chrisdavidmills
I apologize for bothering you again but I have a problem with the Video in my website because it is not working like Responsive Design, for it, Could you help me with it? Thanks for your time

from learning-area.

permanar avatar permanar commented on May 25, 2024

@castana1962 Could you please be more informative about your issue? I mean like, providing some of your code (you probably need jsfiddle.net or pastebin.com if its too long), screenshot of your site, or maybe like your console log.

from learning-area.

chrisdavidmills avatar chrisdavidmills commented on May 25, 2024

@castana1962 I missed your last query completely - really sorry!

To learn about responsive design, start by reading https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

You can get replaced elements like <img> and <video> to behave responsively pretty cheaply. Usually something like this will work:

img, video, iframe {
  display: block;
  max-width: 100%;
}

from learning-area.

avivmu avatar avivmu commented on May 25, 2024

@castana1962 / @chrisdavidmills it seems like this can be closed, if so kindly close

from learning-area.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.