How to play video from youku using javascript?

Question

How to play video from youku using javascript?

3.4k Views Asked by mongkon mamiw At 03 April 2017 at 09:01

How to play video from youku using javascript ?

I tried to do like this but not work, how can i do that ?

<iframe id="test" src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA==" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 50%; height: 50%;"></iframe>


<div style=" position: fixed; top: 56%; " onclick="play_fn()">Play</div>

<script>
function play_fn(){
    var test = document.getElementById('test');
    test.play();
}
</script>

Original Q&A

There are 3 best solutions below

**Quentin** · Answer 1 · 2017-04-03T09:04:22.710000

play() is a method found on <video> and <audio> elements. An <iframe> is just a means to embed a URL in a page. It provides no API for playing media.

Unless youku provide an API that you can access (I couldn't find one with a quick search), then there is no way to trigger playback from your page.

Standard cross origin security restrictions imposed by browsers prevent you manipulating the embedded page with JavaScript.

**Richardson. M** · Answer 2 · 2017-04-03T09:12:42.143000

Refer this code

    <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <script type="text/javascript" src="/js/lib/dummy.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">




  <style type="text/css">
      #overlay {
  position: absolute; 
  top: 100px; 
  color: #FFF; 
  text-align: center;
  font-size: 20px;
  background-color: rgba(221, 221, 221, 0.3);
  width: 640px;
  padding: 10px 0;
  z-index: 2147483647;
}

#v {
  z-index: 1;
}
  </style>

  <title>Overlay HTML over video player</title>






<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">//<![CDATA[
window.onload=function() {
  var video = document.getElementById('v');
  video.play();
}//]]> 

</script>


</head>

<body>
    <video id="v" controls="">
    <source id="webm" src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm">

    <p>Your user agent does not support the HTML5 Video element.</p>


  </video>
  <div id="overlay" style='display: none;'>This is HTML overlay on top of the video! </div>






</body>
</html>

**Георги Димитров** · Answer 3 · 2018-07-06T12:04:16.517000

Check my solution. You can figure out the styles for your own case, I'm using the span as overlay above the video and when you click on it, it disappears and the video plays.

const videoSection = document.querySelector('.video');
    if(videoSection) {
     const playBtn = document.querySelector('.play-btn');
     playBtn.addEventListener('click', playVideo);
    }

    function playVideo() {
     const iframeHolder = document.querySelector('.iframe-holder');
     const iframeEl = document.querySelector('.iframe-holder iframe');
     const playStr = '?autoplay=true';
     let baseUrl = iframeEl.getAttribute('src');
     
     iframeHolder.classList.add('play');
     iframeEl.setAttribute('src', `${baseUrl}${playStr}`);
     iframeEl.setAttribute('allow', 'autoplay');
    }

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <title>Title</title>
</head>
<body>
<div class="video">
<span class='play-btn'></span>
    <iframe allowfullscreen="" frameborder="0"   src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA=="></iframe>
</div>
</body>
</html>



    const videoSection = document.querySelector('.video');
    if(videoSection) {
     const playBtn = document.querySelector('.play-btn');
     playBtn.addEventListener('click', playVideo);
    }

    function playVideo() {
     const iframeHolder = document.querySelector('.iframe-holder');
     const iframeEl = document.querySelector('.iframe-holder iframe');
     const playStr = '?autoplay=true';
     let baseUrl = iframeEl.getAttribute('src');
     
     iframeHolder.classList.add('play');
     iframeEl.setAttribute('src', `${baseUrl}${playStr}`);
     iframeEl.setAttribute('allow', 'autoplay');
    }
    <!doctype html>
    <html class="no-js" lang="">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">

    <title>Title</title>
    </head>
    <body>
    <div class="video">
    <span class='play-btn'></span>
    <iframe allowfullscreen="" frameborder="0"   src="https://player.youku.com/embed/XMjUzMzY2ODQ4OA=="></iframe>
    </div>
    </body>
    </html>

How to play video from youku using javascript?

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in VIDEO

Related Questions in YOUKU

Trending Questions

Popular # Hahtags

Popular Questions