Cách tiêu diệt thành công MediaElementPlayer và tạo một cái mới

Question

Đây là kịch bản:

Tôi có một trang có chứa một phần tử video được thiết lập bằng video. Nguồn của video này có thể là video HTML5 với nhiều nguồn (và dự phòng Flash) hoặc video trên YouTube. Bên dưới đây là một số hình ảnh phục vụ dưới dạng hình thu nhỏ video, nhấp vào một hình ảnh sẽ tải video phù hợp, bằng cách hủy MediaElementPlayer hiện tại và tạo một hình ảnh mới trên cùng một yếu tố video.

Điều này tạo ra các cầu thủ ban đầu về tải trang:

$('video').mediaelementplayer({ alwaysShowControls: true }); 

Và điều này được thiết kế để thay đổi cầu thủ khi một trong những hình ảnh được nhấp:

$('video').mediaelementplayer({ 
    alwaysShowControls: true, 
    success: function(media, dom, player) { 
     console.log('success!'); 
    }, 
    error: function() { 
     console.log('error!'); 
    } 
}); 

Nhưng nó không hoạt động. Chức năng success không bao giờ được nhập (không phải là error) và không có gì xuất hiện.

Tôi đoán thư viện vẫn nghĩ rằng các cầu thủ gốc tồn tại hay một cái gì đó, và đã thử một số điều để thử và nói với nó rằng đây không phải là trường hợp, ví dụ:

mejs.meIndex = 0 
mejs.players = [] 

Để không có hiệu lực, và thiết lập:

window.mejs = null; 
window.MediaElementPlayer = null; 
window.MediaElement = null; 

Chỉ cần phá vỡ mọi thứ :)

thể ai ra khỏi đó giúp đỡ? Tôi chắc chắn rằng tôi đang thiếu một cái gì đó đơn giản ở đây vì vậy tôi sẽ rất biết ơn nếu ai đó có thể chỉ ra những gì! Cảm ơn trước.

Answer 1

Tôi sẽ trả lời câu hỏi của riêng tôi ở đây cho bất kỳ ai khác có thể có cùng một vấn đề và tình cờ gặp phải mục này.

Nó chỉ ra rằng những gì tôi muốn làm không được hỗ trợ MediaElementJS của tôi tại thời điểm viết này.

Giải pháp của tôi là tạo hai trình phát và sử dụng một cho video HTML5/Flash và video kia cho video trên YouTube, hiển thị và ẩn video phù hợp theo yêu cầu.

Answer 2

Tôi đã gặp sự cố tương tự và đã lưu trữ html thẻ video gốc trước khi khởi tạo video bằng cách sử dụng mediaelementplayer(). Khi tôi muốn chuyển đổi video tôi jQuery ("cha mẹ") rỗng() các yếu tố phụ huynh của video phá hủy các yếu tố mediaelementjs tạo ra, sau đó khôi phục html video gốc và reinitialise sử dụng:.

$("#video").mediaelementplayer({ 
    pauseOtherPlayers: false 
}); 

Tôi cắn hacky nhưng thực hiện công việc. Tôi quan tâm để biết nếu bạn đã tìm thấy một cách tốt hơn để làm điều này?

Answer 3

Tôi nghĩ rằng cách tốt nhất để thay đổi video hiện tại chơi được MediaElementJS không phải là để tiêu diệt nó và tạo lại nó một lần nữa, nhưng để sử dụng được xây dựng trong video "src" thuộc tính để thay đổi nguồn.

Sử dụng API MediaElementJS để truy cập thuộc tính "src" này là cách tốt hơn để quản lý các vấn đề nguồn chéo trên trình duyệt (ví dụ: video trên YouTube hoặc dự phòng Flash). Dưới đây là cách tôi đã thực hiện nó:

player.pause(); 
player.setSrc(myNewSourceURL); 
player.load(); 

Tôi cũng đã quay mã này vào một plugin MediaElementJS, sẽ có rất nhiều điều tốt đẹp xung quanh như quản lý danh sách nhạc, bên cạnh và các nút trước, và một bảng điều khiển danh sách nhạc. Bạn có thể tìm thấy the pullRequest on github.

Dưới đây là một ví dụ mã để xây dựng một danh sách nhạc:

new MediaElementPlayer('#myvideo', { 
    features : ['prev','playpause','next', 'progress'], 
    success : function(mediaElement, domObject){ 
     domObject.player.loadPlaylist([ 
      {src: "http://domain.com/video/video1.mp4"}, 
      {src: "http://domain.com/video/video2.mp4"}, 
      {src: "http://domain.com/video/video3.mp4"}, 
     ]); 
    } 
}); 

Sau đó, khi một hình ảnh thu nhỏ được nhấp:

var index = 2; // calculate the item index in the playlist 
player.setItem(index); 

Answer 4

Bạn có thể sử dụng phương thức medialementjs remove(), đặt thuộc tính type và src của phần tử video và sau đó khởi tạo lại mediaelementj nếu loại video đã thay đổi.

thể giống như thế này:

function setSource(url, type) { 
    var vid = $('#video').first(); 
    if (vid.attr('type') != type) { 
     vid.get(0).player.remove(); 
     vid.attr('type', type).attr('src', url); 
     vid.mediaelementplayer({ 
      success: function(media, dom, player) { 
       player.play(); 
      } 
     }) 

    } 
} 

Nếu bạn không chỉ có mp4 và youtube bạn có thể thêm logic bổ sung cho chỉ reinitialize khi cần thiết. Hoạt động hoàn hảo cho tôi.

Answer 5

Nếu bạn cần chuyển đổi các loại video src khác nhau, bạn cần phải phá hủy trình phát và tạo một trình phát mới.

Để tiêu diệt các cầu thủ:

try(){ 
    player.pause(); 
    player.remove(ture); 
} catch(err) { 
    console.log(err); 
}