Video player

Question

Video player

Navigation

#1 by (3 votes)

1

I would like to see if you can help me with a couple of questions.

The first one I need to do something similar to this:

It's a button to start a video.

This is my video code, in the src tag I enter the video route.

<video width="640" height="480" controls id="content_video preload="auto">
<source src=""></source>
</video>

My second question is that you can modify the controls attribute to remove the option to download the video.

html css video

asked by JesusSnd_ 23.03.2018 в 23:10

source

1 answer

Laravel empty and white page Problems not showing the first three notes highlighted with Query in wordpress

score 3 · Accepted Answer

I leave you the code I prepared based on what you need:

$('.custom-play').click(function() {
  $(this).hide();
  $('#video').get(0).play();
});

.custom-play {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(../images/button-play.png) center center no-repeat
}

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

<!-- HTML -->
<div id="freq-content">
  <video id="video" width="320" height="240" controls controlsList="nodownload">
    <source src="http://html5facil.com/demos/videos/big_buck_bunny.webm"  type='video/webm; codecs="vp8, vorbis"'>
    <source src="http://html5facil.com/demos/videos/big_buck_bunny.mp4" type='video/mp4; codecs="avc1,mp4a"'>
  </video>
  <br />
  <div class="custom-play"> </div>
</div>
</div>

I also leave the link to JSFiddle in case you like to try the code:

link

For the start button you can place an image to your liking, once the user click inside the video will begin to play.

Regarding your "remove the download button" question, you only need to add the controlsList="nodownload" attribute so it does not show:

<video id="video" width="320" height="240" controls controlsList="nodownload">