CustomWebView and YouTube

MIT App Inventor Help
1

I display YouTube videos using the CustomWebViewer component. I would like my final screen to be displayed after the end of the display, not some random image from youtube. Anyone have figured out how to do this.

2

Please be more specific. Thank you

3

Please find the simplest app, just one butto to display. The film from YT is displayed OK and after that something from youtube is displayed. How to not display "this something" from youtube
testweb.aia (581.3 KB)

4

Just store your own web page as an App Asset and set that in the webview when the video has stopped?

1 Like
5

I understand your idea but I do not know how to it. On what event using Custom WebView I can check that my film is finished ( the first one) and trigger the next . Please help if you can. Thank you.

6

This is not possible through Java/Android APIs.
I am not sure about JavaScript though. A JavaScript developer can put some light onto it.

7

You may want to have a look here:

and

If you use the youtube api it has event listeners, which includes "end"

You do not say if you are using your own videos or others ?

8

Thank you very much for all the suggestions. I use my own videos from yuotube. I try to apply a solution which consists in examining whether the total time of the film has elapsed. After it's done, I hide the CustomWebView and display my own image. Such a solution, despite its disadvantages, would initially satisfy me.
The problem is that the time is counted from the moment of choosing the video, I cannot correct the autoplay option according to the instructions so that the selected movie does not start automatically.

here I am quoting from the documentation ...
To create an autoplay embedded movie, add "& autoplay = 1" to the movie embed code right after the movie ID (the series of letters following "embed /").

Example:

<iframe width = "560" height = "315"
src = "https://www.youtube.com/embed/D6Ac5JpCHmI?&autoplay=1" frameborder = "0"
allowfullscreen> </iframe>

This works, but the movie does not start automatically

<iframe width = "560" height = "315"
src = "https://www.youtube.com/embed/YfqPeTjOmrQ" frameborder = "0"
allowfullscreen> </iframe>

This doesn't work anymore, an error has occurred..

<iframe width = "560" height = "315"
src = "https://www.youtube.com/embed/YfqPeTjOmrQ&autoplay=1" frameborder = "0"
allowfullscreen> </iframe>

Any ideas ?

9

Try with mute=1 added ?

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/M7lc1UVf-VE
?autoplay=1&mute=1" 
frameborder="0" allow="autoplay"></iframe>

hmm - still doesn't autoplay in app

10

Got it autoplaying (muted) on companion

Reference: YouTube Player API Reference for iframe Embeds  |  YouTube API do IFrame  |  Google Developers

html:

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '195',
          width: '320',
          videoId: 'M7lc1UVf-VE',
          playerVars: {
            'playsinline': 1
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.mute().playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>
2 Likes
11

Thank you very much for your help TIMAI2. My app works now as I wanted.

12

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.