CSS | How to Hide Video Control Bar?

1

Hello! How do I hide the video control bar? See the photo - I’m wondering how to have video like this without the bar at the bottom. (Using video within rectangle with video tag and javascript on each scene) Thanks!

Screen Shot 2017-03-18 at 09.09.11.jpg2880×1800 489 KB

2

Check out this project:
https://drive.google.com/file/d/0BwYybi1nZGdaZDdUYnZ0cUlfSE0/view?usp=sharing

3

Hi Matus - Thanks for sharing that! I’m not using the video element though. I’m using a rectangle element and coding the innerhtml with a video tag and the source file then using javascript for the video. So, I’m in a different boat, from what I understand. Thanks though!

4

Oh, I see.

Try this: http://stackoverflow.com/questions/14161516/html5-video-completely-hide-controls

1 Like
5

Hi! Yeah I saw this googling the question, but I didn’t understand which code was the answer nor how it affects the javascript I’m already using. Wouldn’t there be just a few lines I can add to the javascript I’m using to hide the control?

Below is the javascript I’m using

window.myVideo = hypeDocument.getElementById('ch4dance');
	myVideo.addEventListener('timeupdate', syncTimelines);
	myVideo.play();
	function syncTimelines() {
		videoTime = myVideo.currentTime;
		hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
		
		if (!myVideo.paused) {
	    hypeDocument.continueTimelineNamed('Main Timeline');
		}
		else if (myVideo.paused) {
		hypeDocument.pauseTimelineNamed('Main Timeline');    
		}		
	}
6

Try adding this to your code:

    function hide(){
      video.removeAttribute( 'controls' );
   }

Link: http://stackoverflow.com/questions/29449711/hiding-html5-video-controls

7

So it would look like the code below? The controls were still there and it made the video not autoplay…

window.myVideo = hypeDocument.getElementById('ch4dance');
myVideo.addEventListener('timeupdate', syncTimelines);
myVideo.play();
function syncTimelines() {
	videoTime = myVideo.currentTime;
	hypeDocument.goToTimeInTimelineNamed(videoTime, 'Main Timeline');
	
	if (!myVideo.paused) {
    hypeDocument.continueTimelineNamed('Main Timeline');
	}
	else if (myVideo.paused) {
	hypeDocument.pauseTimelineNamed('Main Timeline');    
	}	
}
function hide(){
  video.removeAttribute( 'controls' );

}

8

Well, I’m not really into Javascript programming, so unfortunately I’m not able to help you with this :frowning:

9

@caverbook
Hi Carey!

I believe You are using a rectangle that uses innerHTML to create the media player?

You can check for this set-up by selecting the Video player in the “Animation” pane or in the Timeline layer listing; and using the keyboard command keys - “option~command-E” or select “Edit Element’s Inner HTML” form the “Edit” menu.

You should then see the HTML video tag in the Video player’s innerHTML, something like the following:

<video id="ch3dream" width="600" height="338" preload="auto" controls="">
      <source src="${resourcesFolderName}/ch3_dream-X.mp4" type="video/mp4">
</video>

Note the controls="" in the opening tag. All You need to do is remove that text from the tag and You will be good to go.

10

Hi Jim! Thanks so much. I removed the controls bit (see below for how it is) and the video doesn’t play. It’s just a black screen, see photo.

<video id="ch3dream" width="600" height="338" preload="auto">
  <source src="${resourcesFolderName}/ch3_dream-X.mp4" type="video/mp4">

Screen Shot 2017-03-19 at 17.14.01.jpg2880×1800 158 KB

11

You will need to trigger your video explicitly with some on screen element such as a “button” or using the “On Scene Load” handler which will have the effect of “autoplay” when the Scene opens.

You do NOT want to put “autoplay” in the video tag itself (in case You were researching the use of video or audio tags) because the other video(s) in your Scenes would also start playing.

Hype Demo (which I believe You will recognize): ch3_JHSv3.hype.zip (2.2 MB)

In this Demo the “Play” button (“On Mouse Click”) triggers the function “videosynctest1”. You could, as mentioned previously, instead have this same function triggered by the “On Scene Load” handler. This “On Scene Load” approach is what I used in previous examples I’ve sent You by PM.

12

Hi Jim, in the demo you sent there is still a control bar. Sorry if I’m getting mixed up, but I’m trying to figure out how to have on screen load autoplay video with no control bar, still synced to the timeline (for subtitles).

Thanks!

13

You actually had all the information You needed…

  1. How to remove the controls - 2 of my posts ago. And You did that in a previous example - what prevented You from doing the same again?

  2. I’ve mentioned using “On Scene Load” as “autoplay” in the last post. (I’ve also explained and used this trigger in most of other examples I’ve sent You via PM).

The function “videosynctest1” is where all the action happens - You quoted this code in your third & fourth posts in this thread. You simply use the “On Scene Load” handler to trigger it as in virtually all the other example I’ve sent You.

Demo: No control bar, “autoplay” on scene load, synced to timeline.
ch3_JHSv5.hype.zip (2.2 MB)

14

Ok, thanks I’ll look at this again. The only thing I see from your demo is that the video doesn’t expand to fill the browser, even when I made changes to it so that it should do that.

I’ll try all of this, thank you!

15

1 set up your video element with 100% for width and height, and put it in a regular text box, not a frame object
2 set the object to expand with HYPE UI controls for sizing
3 run this javascript below on the scene load
4 you can actually turn off the controls for the video by just not including the controls attribute in your HTML, but you can toggle it off with the code below also

// get a pointer to the video set up, you will need to customize this first line of code with your own ID
window.myVideo = document.getElementById(“idOfVideoElement”);
window.myVideo.controls = false;
window.myVideo.play();

16

Thanks!