Malfunction of the WebViewer

I tried to do this with WebView:

  1. I load into my app an html file that contains the following code:
<!DOCTYPE html>

<html>

<head>
<style type="text/css">
#player {pointer-events: none}
</style>
</head>
 
  <body>
<script>

var player;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '175',
    width: '300',
    videoId: 'GnYaxuGcpyE',
    playerVars: {
      'autoplay': 0,
      'mute': 0,
      'controls': 0,
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerReady(event) {
  event.target.playVideo();
}
function stopVideo() {
  player.stopVideo();
}
function onPlayerStateChange() {
 
}


function pause() {
  var state = player.getPlayerState();
  if (state === 2) {
    player.playVideo();
    document.getElementById("playPause").innerText = "Pausa"
  } else if (state === 1) {
    player.pauseVideo();
    document.getElementById("playPause").innerText = "Play"
  }
}

function changeVideo(videoId){
player.loadVideoById(videoId)
}



function visualizza_pausa(){
document.getElementById('pausa').style.visibility = 'visible';
}

function visualizza_play(){
document.getElementById('play').style.visibility = 'visible';
}

function nascondi_pausa(){
document.getElementById('pausa').style.visibility = 'hidden';
}

function nascondi_play(){
document.getElementById('play').style.visibility = 'hidden';
}

 </script>

 <button id="pausa" onclick="player.pauseVideo();nascondi_pausa();visualizza_play()">
   Pausa  
  </button>

    <button id="play" onclick="player.playVideo();nascondi_play();visualizza_pausa();">
   Play
  </button>
    <div id="player"></div>

  </body>
</html>

this file :
a) embed youtube video,
b) inhibits the play / pause by pressing on the video itself
c) has two buttons outside the video for play and pause!
2) when this file is launched on my PC, or on web site (http://ricorda.altervista.org/segnAAudio/webviewstring.html) it works PERFECTLY!
3) when I upload the file to the app media and view it with WebViewer, the buttons (play and pause) DO NOT work !!
it starts to work ONLY if I DO NOT inhibit the play and pause on the click of the video itself by removing the following code from the page:

<head>
<style type="text/css">
#player {pointer-events: none}
</style>
</head>

ONLY in this way after having given the FIRST PLAY by pressing on the video, the external buttons start to work! but if the click on the video is blocked everything remains stationary and not working!
does anyone know how this problem can be solved ??

grazie

You do not show the webviewstring in your html ?

I see the webviewstring.html page but the play and pause buttons don't work

Please share an example aia project, so others can test and offer solutions, if possible...

I'd love that! I thought I already shared it ...
there he is:
browser.aia (3.3 KB)

Try this one

browserytview1.aia (3.0 KB)

Both work, but like you I had to remove the pointer events styling for the first one. Did a fair bit of editing to the second one for it to work. No use of the webviewstring, perhaps this comes later for yt codes ?

but what is the video? there are 2 videos! one is displayed at the initialization of the app and has the two external buttons that do not work as before! it's a
another video is loaded at the click of button1, and in this you have eliminated the external play and pause buttons !! the buttons must remain and must play and pause the video as in the link (http://ricorda.altervista.org/segnAAudio/webviewstring.html). but above all the play and pause directly by clicking on the video must be inhibited. for this reason I had entered the code
``

#player {pointer-events: none} `` ... I hope I have explained my problem and thanks for the help anyway!

P.S.
as it is now the work you have modified (without external buttons and the code written before) would it be possible to autoplay the video when I load the page ??
because if this were possible I would be very happy, I would have solved every problem!

Hello and thanks

another possible solution to this problem would be to put 2 external buttons of AI2 and not present in the html page. with these two buttons we should be able to play and pause the video, is it possible? I did some tests but I was not able ...

when I click on the external buttons present in the html file the java script is executed:

<button id="pausa" onclick="player.pauseVideo();">
   Pausa  
  </button>

    <button id="play" onclick="player.playVideo()">
   Play
  </button> 

how do i run the same script from an AI2 button? could you pass the code with "get" or "post" methods or other ways from AI2 to the html page ?! maybe this way WebViewer works better !!
are ideas, possible solutions, what do you think?
I hope to receive your help I have not used AI2 for years and I am not a programmer of other code ...

thank you all

1 Like

[HOWTO] video_camera YouTube Video Player With App Inventor!

and search the community for yoututbe autoplay for other possible solutions