CODEWITHSUNDEEP
htmlvideobackground
Maximus
Maximus

Reputation: 11

Ho do I add controls to an html5 video? (how to make commands video in background html)

Here is my code to play a video in the background using the html5 video tag:

<video autoplay poster="polina.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">
<source src="det/img/bgv.mp4" type="video/mp4">
</video>

But how do I add the controls? (play video play, pause, stop)

Upvotes: 0

Views: 1842

Answers (2)

JDA
JDA

Reputation: 61

you could add the attribute "controls" to the tag

<video autoplay poster="polina.jpg" id="bgvid" controls>...</video>

you could use javascript to hook into the video object. Tie this to a button click or any other type of event that makes sense for your application.

var v = document.getElementsByTagName("video")[0];

v.play();

If applicable it might be useful to consider looking into using a javascript library designed to make using the video tag easier.

For more Research:

Mozilla::Using_HTML5_audio_and_video

Microsoft::Using JavaScript to control the HTML5 video player

Upvotes: 1

Edi G.
Edi G.

Reputation: 2422

You can achieve this with javascript

Basic example from MSDN:

<script type="text/javascript">

function vidplay() {
   var video = document.getElementById("Video1");
   var button = document.getElementById("play");
   if (video.paused) {
      video.play();
      button.textContent = "||";
   } else {
      video.pause();
      button.textContent = ">";
   }
}

function restart() {
    var video = document.getElementById("Video1");
    video.currentTime = 0;
}

function skip(value) {
    var video = document.getElementById("Video1");
    video.currentTime += value;
}      
</script>

</head>
<body>        

<video id="Video1" >
//  Replace these with your own video files. 
     <source src="demo.mp4" type="video/mp4" />
     <source src="demo.ogv" type="video/ogg" />
     HTML5 Video is required for this example. 
     <a href="demo.mp4">Download the video</a> file. 
</video>

<div id="buttonbar">
    <button id="restart" onclick="restart();">[]</button> 
    <button id="rew" onclick="skip(-10)">&lt;&lt;</button>
    <button id="play" onclick="vidplay()">&gt;</button>
    <button id="fastFwd" onclick="skip(10)">&gt;&gt;</button>
</div>

Upvotes: 1

Related Questions