Sorry, your browser does not support JavaScript!

Have an account?

Don't have account,

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

1+5 = ? ( 6 )

Have an account?

You must login to ask question.

Need An Account,

You must login to add post.

Need An Account,
Search
Ask A Question

LEARN, SHARE KNOWLEDGE & WORK TOGETHER

Aviance School is one of the largest web solutions platform in India for developers to learn and share​ ​their programming ​knowledge and build their careers.

Ask A Question
Home / Questions / Q 10264
Next
In Process
  • 1
Learner
Asked: In:

How to embed uploaded videos in row frames using HTML and Javascript (like Youtube)?

  • 1

How to embed uploaded videos in row frames using HTML and Javascript (like Youtube)?

HtmlJavascriptyoutube
Share

    1 Answer

    1. Professional

      <!DOCTYPE html>
      <html>
      <head lang=”en”>
      <meta charset=”UTF-8″>
      <title>Basic JavaScript Youtube Player- With playlist</title>

      <style>
      a {
      text-decoration: none;
      display: inline-block;
      padding: 8px 16px;
      }

      a:hover {
      background-color: #ddd;
      color: black;
      }

      .previous {
      background-color: #396a08;
      color: black;
      }

      .next {
      background-color: #19212f;
      color: white;
      }

      .round {
      border-radius: 50%;
      }
      </style>

      </head>
      <body>
      <div class=”player” style=”width: 480px;height:360px;max-width: 50%;margin: 0 auto;”>
      <div id=”youtube” style=”width: 100%;height: 100%”></div>
      <div class=”controls” style=”text-align: center;margin: 0 auto;”>

      <a href=”#” onclick=”YouTubePlayer.playPrevious()” class=”previous”>&laquo; Previous</a>
      <a href=”#” onclick=”YouTubePlayer.playNext()” class=”next”>Next &raquo;</a>

      </div>
      </div>
      <script src=”https://www.youtube.com/iframe_api”></script>
      <script>
      var YouTubePlayer = {
      current: 0,
      player: null,
      /**
      * Tracks ids here…
      */
      videos: [
      ‘h3fnl2o4PsU’,
      ‘FvyCcLhM1vM’
      ],
      currentlyPlaying:function(){
      console.info(‘Current Track id’, YouTubePlayer.videos[YouTubePlayer.current]);
      return YouTubePlayer.videos[YouTubePlayer.current];
      },
      playNext: function () {
      YouTubePlayer.increaseTrack()
      if (YouTubePlayer.player) {
      YouTubePlayer.currentlyPlaying();
      YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
      } else {
      alert(‘Please Wait! Player is loading’);
      }
      },
      playPrevious: function () {
      YouTubePlayer.decreaseTrack()
      if (YouTubePlayer.player) {
      YouTubePlayer.currentlyPlaying();
      YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
      } else {
      alert(‘Please Wait! Player is loading’);
      }

      },
      increaseTrack: function () {
      YouTubePlayer.current = YouTubePlayer.current + 1;
      if (YouTubePlayer.current >= YouTubePlayer.videos.length) {
      YouTubePlayer.current = 0;
      }
      },
      decreaseTrack: function () {
      YouTubePlayer.current = Math.max(YouTubePlayer.current – 1, 0);
      },
      onReady: function (event) {
      event.target.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
      },
      onStateChange: function (event) {
      if (event.data == YT.PlayerState.ENDED) {
      YouTubePlayer.playNext();
      }
      }
      }
      function onYouTubeIframeAPIReady() {
      YouTubePlayer.player = new YT.Player(‘youtube’, {
      height: ‘350’,
      width: ‘425’,
      events: {
      ‘onReady’: YouTubePlayer.onReady,
      ‘onStateChange’: YouTubePlayer.onStateChange
      }
      });
      }
      </script>
      </body>
      </html>

      • 0

    Leave an answer