Wie zu spielen-video von youku mit javascript?

How to play-video von youku mit javascript ?

Ich versuchte zu tun, wie dies aber funktioniert nicht, wie kann ich das tun ?

<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>
  • Tut youku haben API-Dokumentation, die Sie betrachten könnte?
  • Vielleicht sollten Sie sich die API youku zu bieten haben? cloud.youku.com/docs?id=0
InformationsquelleAutor mongkon mamiw | 2017-04-03



3 Replies
  1. 0

    play() ist eine Methode, finden Sie auf <video> und <audio> Elemente. Ein <iframe> ist nur ein Mittel zum einbetten einer URL in einer Seite. Es gibt keine API für die Wiedergabe von Medien.

    Es sei denn, youku bietet eine API, die Sie zugreifen können (ich konnte nicht finden, dass man mit einem quick search), dann gibt es keine Möglichkeit zum auslösen der Wiedergabe von Ihrer Seite.

    Standard cross-origin-security-Einschränkungen, die durch Browser verhindern Sie die Manipulation der embedded-Seite mit JavaScript.

  2. 0

    Check meine Lösung. Sie können herausfinden, die Stile, die für Ihren eigenen Fall, ich bin mit der span als overlay über das video und wenn Sie darauf klicken, verschwindet es und das video wird abgespielt.

    JS:

    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');
        }

    HTML:

    <!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>


  3. -1

    Finden Sie diesen 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>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.