Làm thế nào để tạm dừng video youtube được nhúng vào khung hình cuối cùng?

Question

Khi phát video được nhúng trên youtube, tôi không muốn hiển thị hình thu nhỏ có độ phân giải kém khi hoàn tất. Thay vào đó, tôi muốn có một hình ảnh có độ phân giải cao của khung hình cuối cùng. Điều này có thể không?

Hoặc tôi có thể tạm dừng trên khung hình cuối cùng hoặc có thể có cách tạo hình thu nhỏ có độ phân giải cao của khung hình cuối cùng?

Answer 1

Bạn có thể sử dụng API trình phát YouTube để phát hiện khi phát lại đã kết thúc và tại thời điểm đó thực hiện một số thao tác DOM để hoán đổi trình phát và hoán đổi trong một thẻ img trỏ đến một trong các hình thu nhỏ của video. Tuy nhiên, thông thường sẽ không có hình thu nhỏ cho khung hình cuối cùng trong video, vì vậy bạn sẽ phải chọn hình thu nhỏ khác.

Nếu bạn chỉ muốn vô hiệu hóa các video có liên quan được hiển thị khi video kết thúc, bạn có thể sử dụng thông số trình phát rel=0, nhưng điều đó sẽ khiến bạn có màn hình màu đen.

Answer 2

máy nghe nhạc video cho một callback "onStateChange" với tình trạng YT.PlayerState.PAUSED trước khi gọi gọi lại với tình trạng YT.PlayerState.ENDED, bạn có thể thử ở đây.

Tôi cũng đang làm điều tương tự. Tôi chỉ hiển thị lớp phủ để bao gồm video bằng nút phát lại nhưng vẫn xuất hiện ở cuối video và sau đó lớp phủ xuất hiện (một số trục trặc được quan sát)

Answer 3

Tôi gặp phải vấn đề này và sau khi chi tiêu một loạt thời gian chơi với nó, giải pháp tốt nhất cho tôi là chỉ tạm dừng video một phần nhỏ của giây trước khi kết thúc, do đó giữ nó trên khung đó. Một cái gì đó như thế này:

var player; 

     function onYouTubePlayerAPIReady() { 
     player = new YT.Player('player', { 
      playerVars: { 'autoplay': 1, 'controls': 0,'loop': 1, 'showinfo': 0, 'disablekb': 1, 'version': 3, 'vq': 'large', 'wmode':'opaque','rel': 0 }, 
      videoId: 'YOURVIDEOID', 
      events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onStateChange, 
      'onytplayerStateChange': onStateChange } 

     }); 

     } 

    var done = false; 
    function onStateChange(event){ 
     var videoDuration = player.getDuration(); 
     if (event.data == YT.PlayerState.PLAYING && !done) { 
      // pause 0.1 seconds before the end 
      setTimeout(pauseVideo, (videoDuration-0.1)*1000); 
      done = true; 
     } 
    } 

    function pauseVideo() { 
     player.pauseVideo(); 
    } 

Sau khi video bắt đầu (mà chúng tôi bắt sử dụng onStateChange), chúng ta có thể có được thời lượng video từ API YouTube Player (sử dụng player.getDuration), và sau đó sử dụng setInterval để thời gian một hàm tạm dừng video 0,1 giây (hoặc bất kỳ giá trị nào chúng tôi chọn) trước khi kết thúc.

Answer 4

Sau khi chạy vào đến vấn đề này quá tôi đã kết thúc với điều này, mà đã làm việc khá phù hợp đối với tôi cho đến nay:

var player; 
var curTimer; 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
        videoId: 'The Video ID', 
        playerVars: { 'rel':0, 'enablejsapi':1, 'autohide':1, 'wmode':'opaque'} 
       }); 
    player.addEventListener('onReady', 'onPlayerReady'); 
    player.addEventListener('onStateChange', 'onPlayerStateChange'); 
} 
function onPlayerStateChange(event) { 
    var videoDuration = event.target.getDuration(); 
    var curTime = event.target.getCurrentTime(); 
    if (curTime) { 
     /** Video Already Started */ 

     /** Get video time remaining. */ 
     videoDuration = videoDuration-curTime; 

     /** Remove old 'setTimeout' function */ 
     removeTimeout(curTimer); 
    } 
    /** 
     Note: The '.25' is time subtracted to stop video on last frame. 
     Adjust this as needed. 
    */ 
    /** Add/Re-Add 'setTimeout' function with video time remaining. */ 
    curTimer = setTimeout(pauseVideo, (videoDuration-.25)*1000); 
} 
function removeTimeout(elTimer){ 
    /** Remove old timer */ 
    clearTimeout(elTimer); 
} 
function stopVideo() { 
    player.stopVideo(); 
} 

viên thuyết minh và/hoặc thuyết minh này là trong các ý kiến.