CODEWITHSUNDEEP
javascriptjqueryhtml
user967451
user967451

Reputation:

Showing HTML5 Video Controls but not allowing user to change anything?

Is it possible to show the user an HTML5 Video player's controls but not allowing them to change anything, like seeking any part of the video, changing volume, etc?

Upvotes: 0

Views: 1342

Answers (3)

SreYash
SreYash

Reputation: 111

There are many ways of doing it.

First way is to use video{pointer-events:none;},in which user cannot click or use default control bar.But here user also cannot play/pause the video.So,you have to add play/pause button(as I added in snippet).

Second way is here.But you have to add progress bar and timings.(progressbar)

and Third way is to use library or frameworks which are comfortable to do this. For eg. Use Youtube to embed videos without controles.This can be the best way but your video should be on Youtube.If not,upload it..:)

var vid = document.getElementById("vid"); 

function play() { 
    if (vid.paused) 
        vid.play(); 
    else 
        vid.pause(); 
} 
video{pointer-events:none;}
<div>
<video id="vid" width="320" height="240" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
  </div>
<br>
<button onclick="play()">Play/Pause</button>

Upvotes: 0

Fabien Quatravaux
Fabien Quatravaux

Reputation: 3786

Native HTML5 <video> element does not allow this behavior. But, as Andy said, you are free to provide your own controls and make them read-only.

Take a look at MediaElementJS, a javascript library that wraps around HTML5 video and provide skinable controls. You could for example extract the source code of the progress bar, and modify it to remove the click handler.

Upvotes: 0

Andy
Andy

Reputation: 30135

An easy way would be to just absolutely position a transparent element above the video.
You could also create custom video controls which only show the timeline for example but allow no interaction.

Upvotes: 1

Related Questions