How can I play a video so that it doesn't show the video controls even when I click on it(video)?

MIT App Inventor Help
21

Why don't you have a look at it? Download it from the Media folder and open in Notepad or similar.

Also a couple of additional things you can do:

  1. Try adding this line just below the <html> tag at the top:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

This should prevent zooming.

  1. I have updated the webviewextra extension which, by default, will allow sound to be played using autoplay for html5video. No need for "muted" in the html for playback to start with sound.
22

Hello, I downloaded it and opened it and saw the following address in it.
https://www.bigbuckbunny.org
MyVideo URL address is in Google drive and it is not fixed and changes.

23

Then remove the credit
(everything in between and including the <p>...</p>)

24

If the URL of the movie is not fixed
What should be written in this place(https://www.bigbuckbunny.org/)?

25

See attached:

noControlsVideo_rev1.aia (28.5 KB)

I have updated the html file and the aia project.

In the html file, I added the meta tag to prvent a user zooming the web page, and removed "muted" from the video parameters to allow for sound

In the aia, the filename and google drive file ID are set in the two variables at the top. You can set these to your own files. I have added the webviewextra extension for sound on autoplay.

26

Hello, thank you, that's great. I want this movie and an image to be placed side by side on a horizontal layer, and when I click the full screen button, the image will disappear and the movie will cover the entire width of the screen .very thanks
noControlsVideo_rev1 (1).aia (77.7 KB)

27

How do you propose to get out of fullscreen ? Backpress key ?

28

When the movie ended and when we pressed the full screen button again.

29

but if the video is at fullscreen, how will a user press this button ?

Do you just mean the full width of the screen, when in portrait mode ? if so try this:

noControlsVideo_rev2.aia (77.9 KB)

30

Hello, thanks. The video won't enlarge.

photo_2025-03-26_12-41-12
photo_2025-03-26_12-41-12720×1280 37.8 KB

full
full720×1280 24.3 KB

I have created the application with a video player, but it has two problems: 1- The list view is not aligned to the right. 2- When we click on the video, the control bar and control buttons appear

1
1720×1280 118 KB

2
2720×1280 112 KB

3
3720×1280 90.8 KB

The video must cover the entire width of the screen and the length and width of the video must be equal. It will be a larger view, not full screen
5
5720×1280 55.3 KB

31

Did you try the one I provided ? Did that work as expected before you added other components?

You will see the method for transitioning to "full screen" and back, you will need to expand on this if you add other components.

32

Hi. Thanks.yes i test and The video won't enlarge

full
full720×1280 24.3 KB

33

Delete your existing vidplayGD2.html file so that the app can update the new one

No issues here:

image

image
image369×517 33.5 KB

34

Hello again and thanks. When I used the companion it didn't work properly but when I got the apk output and run it ,it worked. Another question :sweat_smile:: How can I make the video automatically convert to a small view when it reaches the end, thank you :rose:.

photo_2025-04-01_22-25-25
photo_2025-04-01_22-25-25720×1280 40.8 KB

35

You would need some more javascript in your html file, and a few more blocks in your code:

<script type='text/javascript'>
    document.getElementById('video1').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        window.AppInventor.setWebViewString("ended");
    }
</script>

image

37

Are the following codes correct in vidplayGD2.html?I have always shied away from coding.

image
image807×441 10.4 KB

38

Try like this:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<body>

<video id="video1" width="100%" height="100%" autoplay>
  <source src="" type="video/webm">
</video>

<script>
var myVideo = document.getElementById("video1");
var wvs = window.AppInventor.getWebViewString().split(',');
document.getElementById("video1").src = wvs[0];

document.getElementById('video1').addEventListener('ended',myHandler,false);
function myHandler(e) {
window.AppInventor.setWebViewString("ended");
}

window.setInterval(function(){
if (window.AppInventor) {
var wvs = window.AppInventor.getWebViewString().split(',');
if (wvs[1] == "PLAYPAUSE") {
playPause();
window.AppInventor.setWebViewString("");
}
}
}, 250);

function playPause() { 
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
} 
</script>

</body>
</html>
39

Hi. After the video ends, the video does not go to small view.
noControlsVideo_rev2.aia (77.9 KB)

40

Did you delete the previous vidplayGD2.html from your device again so that the new file is copied over ?

1 Like
41

Hello, I apologize. Yes, it's correct. :sweat_smile: :rose:

1 Like