Hiển thị ảnh tùy chỉnh trước khi video youtube bắt đầu

Tôi đang cố gắng hiển thị hình ảnh trong div "trình phát", sau đó sau khi khách truy cập nhấp vào nút, thay thế bằng video (thay thế div bằng iFrame). Đây là mã của tôi:Hiển thị ảnh tùy chỉnh trước khi video youtube bắt đầu

<!DOCTYPE html> 
<head> 
<style type="text/css"> 
html { 
text-align: center; 
} 

#player { 
display: inline-block; 
width: 640px; 
height: 360px; 
background: url(http://placehold.it/640x360) no-repeat; 
} 
</style> 
</head> 
<html> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 
    <p><button onclick="playMe()">Play</button></p> 

    <script> 
    function playMe() { 
     // 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: '360', 
      width: '640', 
      videoId: 'JW5meKfy3fY', 
      playerVars: { 'autoplay': 0, 'controls': 0, 'rel': 0, 'showinfo': 0 }, 
      events: { 
      'onReady': onPlayerReady 
      } 
     }); 
     } 

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

    } 

    </script> 
    </body> 
</html>

Nhưng nó không hoạt động.

Nó hoạt động khi chức năng "playMe" bị xóa, nhưng tôi cần video bắt đầu sau khi nút/div/link được nhấp. Tôi đã cố gắng để đưa hình ảnh và video vào riêng biệt div s, hình ảnh trên đầu trang của video và hơn sau khi nhấp vào ẩn div hàng đầu và bắt đầu video, nhưng điều đó đã không làm việc hoặc.

Nguồn

2012-11-01 Noga

Đây là vấn đề về phạm vi biến.

Hàm trênYouTubeIframeAPIReady cần phải là biến toàn cục - cũng như biến trình phát. Tôi tin rằng ví dụ này nên làm cơ sở cho những gì bạn muốn (có một điều kiện chủng tộc nếu bạn nhấp vào nút trước khi api đã tải xuống, nhưng việc triển khai đầy đủ có thể là ứng dụng cụ thể, vì vậy tôi sẽ để người đọc)

<!DOCTYPE html> 
<head> 
<style type="text/css"> 
html { 
text-align: center; 
} 

#player { 
display: inline-block; 
width: 640px; 
height: 360px; 
background: url(http://placehold.it/640x360) no-repeat; 
} 
</style> 
</head> 
<html> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 
    <p><button onclick="playMe()">Play</button></p> 

    <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. called after the API code downloads. 
    var player; 
    function onYouTubeIframeAPIReady() { 
     // don't need anything here 
    } 

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

    function playMe() { 
     if (window.YT) { 
      player = new YT.Player('player', { 
         height: '360', 
         width: '640', 
         videoId: 'JW5meKfy3fY', 
         playerVars: { 'autoplay': 0, 'controls': 0, 'rel': 0, 'showinfo': 0 }, 
         events: { 
          'onReady': onPlayerReady 
         } 
        }); 
     } 
    } 
    </script> 
    </body> 
</html>

Nguồn

2012-11-07 18:43:54

Điều này hoạt động chính xác như tôi muốn, cảm ơn bạn rất nhiều. – Noga

Hiển thị ảnh tùy chỉnh trước khi video youtube bắt đầu

Trả lời

Các vấn đề liên quan