Как воспроизвести видео с youku, используя JavaScript?

Как воспроизвести видео с youku, используя JavaScript?

Я пытался сделать это, но не работать, как я могу это сделать?

<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>
Источник

3 ответа

play() метод найден на <video> а также <audio> элементы. <iframe> это просто средство для вставки URL на страницу. Он не предоставляет API для воспроизведения медиа.

Если вы не предоставите API, к которому у вас есть доступ (я не смог найти его с помощью быстрого поиска), то невозможно запустить воспроизведение с вашей страницы.

Стандартные ограничения безопасности, установленные браузерами, не позволяют вам манипулировать встроенной страницей с помощью JavaScript.

Источник

Проверьте мое решение. Вы можете выяснить стили для своего собственного случая, я использую span как наложение над видео, и когда вы нажимаете на него, оно исчезает, и видео воспроизводится.

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>

                                        
                                    
                                

                                

                                    

                                        

                                            
                                        

                                        
                                    

                                    

                                        

                                            
                                                Источник

Ссылайтесь на этот код

    <!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>
Источник
Другие вопросы по тегам