Mediaelement.js: làm cách nào để thay đổi hình ảnh áp phích?

Question

Tôi đang cố thay đổi các nguồn video thông qua JS. Đó là chủ yếu là làm việc.

var basename = "video/whatever"; 
$("#myvideo")[0].setSrc([ 
    {type: "video/mp4", src: basename + ".mp4"}, 
    {type: "video/webm", src: basename + ".webm"}, 
    {type: "video/ogg", src: basename + ".ogv"} 
]); 

Vì vậy, vấn đề đầu tiên: khi tôi thay đổi nguồn nút tạm dừng hiển thị thay vì phát và nút phát lớp phủ lớn không hiển thị, ngay cả khi nút đó bị tạm dừng. Tôi đã thử gửi các kết hợp khác nhau của stop() và pause() và setCurrentTime (0) trước và sau cuộc gọi setSrc nhưng không may mắn.

Vấn đề quan trọng hơn: Tôi chưa tìm thấy cách thay đổi hình ảnh áp phích của video. Tôi đã mong đợi để xem một phương pháp trong API để thay đổi nó, vì tôi muốn nó để cập nhật cho các fallbacks Flash/Silverlight quá. Tôi đã thử chỉ thay đổi thuộc tính poster trên phần tử video nhưng điều đó dường như không làm điều đó.

Answer 1

Tôi biết đây là một câu hỏi khá cũ nhưng tôi nghĩ tôi sẽ gửi câu trả lời mà làm việc cho tôi.

var basename = "video/whatever"; 
// Where videoPlayer is the video element. 
if(!videoPlayer.paused) { 
    videoPlayer.pause(); 
} 
setTimeout(function(){ 
    // Set poster image 
    $('.mejs-poster').empty().append('<img src="'+ basename + '.jpg"/>').show(); 

    // Set video source 
    videoPlayer.setSrc([ 
     {type: "video/mp4", src: basename + ".mp4"}, 
     {type: "video/webm", src: basename + ".webm"}, 
     {type: "video/ogg", src: basename + ".ogv"} 
    ]); 
}, 0); 

Dưới đây là giải thích tốt về những gì setTimeout đang thực hiện: https://stackoverflow.com/a/779785/1425269.

Bạn cũng có thể cần một số css cho hình ảnh áp phích, tùy thuộc vào chủ đề bạn đang sử dụng.

.mejs-poster img { 
    padding: 0; 
    border: 0; 
    width: 100%; 
    height: auto; 
} 

Answer 2

Hmm, vì điều này vẫn mở, tôi khuyên bạn nên sử dụng một cách tiếp cận hoàn toàn khác.

• Thiết lập đối tượng 4 html video mỗi với các thuộc tính bạn cần
• Sử dụng javascript để chuyển đổi mà người ta có thể nhìn thấy và chơi nó

Hy vọng rằng sẽ giúp!

Answer 3

Thực hiện một cách tiếp cận hoàn toàn khác.

TIẾP CẬN 1:

<video controls="controls" id="Player" height="200" width="600"> 
<source src="video.mp4"> 
<object id="Player" height=200" width="600" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> 
<!-- Windows Media Player Backup For IE --> 
<param name="Showcontrols" value="True"> 
<param name="URL" value="video.mp4"> 
<param name="AllowShuffle" value="Yes"> 
<param name="autoStart" value="True"> 
<param name="Volume" value="100"> 
<param name="EnableContextMenu" value="False"> 
<!-- For browsers that do not support HTML5 Video --> 
<embed src="video.mp4" autoplay="autoplay" controls="controls" height="200" width="600" id="Player"> 
</object> 
</video> 

(Thẻ <object> là dành cho IE từ HTML 5 video không luôn luôn làm đúng, hoặc đôi khi không cho phép thay đổi của nguồn video khác)

• Thay đổi mã nguồn trong tất cả các trình duyệt (ngoại trừ IE không cho phép thay đổi src của <video> v.v.) là truy cập document.getElementById("player").src="newvideo.mp4"

• Đối với Internet Explorer, mã là: Player.url = "newvideo.mp4"

• Trình duyệt duy nhất có thể cung cấp thêm sự cố là Safari.

TIẾP CẬN 2: (có thể được sử dụng với jQuery quá!)

• Nơi video bên trong một <span id="myvideo2"> hoặc <div id="myvideo2"> thẻ của riêng nó. Đảm bảo cung cấp id, ví dụ: "Myvideo2"
• Thay đổi innerHTML sử dụng document.getElementById("myvideo2").innerHTML= /*Escaped Javascript for the HTML code for the video with new source"*/
• nên làm việc trong tất cả các trình duyệt