MediaElement에로드 비디오 플레이어

Question

나는 medialement.js

구성은 다음과 같다을 사용하여 MP3에 대한 링크를로드하는 자바 스크립트 코드를 사용하고 있습니다 :

var audioDiv = document.getElementsByClassName("audio-player"); 
$(audioDiv).each(function(index) { 
    if ($(this).className != 'mediaplayer-processed') { 
    var playlist = $(this).attr('href'); 
    playlist = playlist.replace("%20", " "); 
    sourceType = playlist.split('.').pop().toLowerCase(); 
    if (sourceType == 'mp3') { 
     sourceType = 'mpeg'; 
    } 
    audioTag = '<audio class="audio-player">' 
    audioTag = audioTag + '<source type="audio/' + sourceType + '" src="' + playlist + '" />'; 
    audioTag = audioTag + '</audio>'; 
    $(this).outerHTML=audioTag; 
    config_me = { 
     // enables Flash and Silverlight to resize to content size 
     enableAutosize: true, 
     // the order of controls you want on the control bar (and other plugins below) 
     features: ['playpause','volume'], 
     // Hide controls when playing and mouse is not over the video 
     alwaysShowControls: true, 
    }; 
    // I need to set the video height and width because it is displayed as video 
    config_me.videoHeight = 30; 
    config_me.videoWidth = 60; 
    config_me.audioWidth = 60; 
    config_me.audioHeight = 30; 
    config_me.loop = false; 

    $(this).addClass('mediaplayer-processed').mediaelementplayer(config_me); 
    } 
}); 

이제는 최소한의 오디오 플레이어가 필요 하겠지만, 전체 비디오 플레이어이며 미디어 요소가 "mejs-audio"대신 "mejs-video"클래스로로드됩니다.

나는 config_me에서 유형을 강요했지만 비디오로 계속로드됩니다.

내가 누락 된 항목이 있습니까? media element 2.15.2를 사용하고 있습니다. $(this)가 jQuery를 참조하기 때문에

$(this).outerHTML = audioTag; 

이 ... 작동하지 않습니다 (jsfiddle 참조)

Answer 1

미묘한 세부 사항이, 당신은 당신의 코드

FIRST에서 고려해야 있습니다 개체, 아니 문서 개체. 그 때문에의

는 <audio> 태그는 <a> 태그를 대체하는, 그래서

$(this).addClass('mediaplayer-processed').mediaelementplayer(config_me); 

... 실제로 현재 <a> 태그에 mediaelementplayer() 바인딩, 그리고 아무것도 없기 때문에 MEJS는 기본적으로 video로 구성 않았다 거기에 오디오라고 알려줍니다.

이 경우

, 당신은해야한다 : 당신이 마지막으로 video 태그를 사용하여 a 태그를 교체 한 후

this.outerHTML = audioTag; 

이 jsfiddle

---

SECOND를 참조하십시오,이

$(this).addClass('mediaplayer-processed').mediaelementplayer(config_me); 

,210

$(this) 더 이상합니다 (<a> 태그)를 존재하지 않는 요소를 참조하기 때문에 ... 여전히 audio 태그에 mediaelementplayer()을 결합하지 않습니다 그래서 경우에 당신은 수행해야합니다

$(".audio-player").addClass('mediaplayer-processed').mediaelementplayer(config_me); 

을 .. video 태그가 이제 audio-player클래스을 공유하기 때문입니다.

하십시오 통지 그러나, 당신은 .each() 방법 내부 mediaelementplayer()을 초기화 할 경우 그 클래스와 함께 하나 개의 audio 태그되기 때문에, 첫 번째 요소가 제대로 초기화됩니다.

1. 휴가 : 클래스audio-player와 요소의 나머지 부분은 여전히 ​​첫 번째 루프 동안 <a> 태그입니다 (당신은 원래 문제에 돌아올 것이다) 해결 방법으로

   두 가지 옵션이 있습니다

   audioTag = '<audio class="audio-player'+index+'">' 
   

   다음 .each() 방법 내부 mediaelementplayer() 방법하지만이 같은 새 video 태그에 다른 클래스를 추가합니다. ... 다음, 그들처럼 초기화 :

   이

   $(".audio-player"+index+"").addClass('mediaplayer-processed').mediaelementplayer(config_me); 
   

2. 이 코드가있는 방법을두고 있었으나 결국 .each() 방법 등 후 mediaelementplayer() 방법을 이동 : 중 하나

   $(audioDiv).each(function (index) { 
       if() {... } 
   }); 
   $(".audio-player").addClass('mediaplayer-processed').mediaelementplayer(config_me); 
   

주의 사항 위의 구성은 모든 a 태그를 페이지로드시 audio 태그로 변환합니다. 여기

는 볼륨 처리기에 대한 몇 가지 여분의 공간이 필요하므로

jQuery(document).ready(function ($) { 
    var audioDiv = document.getElementsByClassName("audio-player"); 
    $(audioDiv).each(function (index) { 
     if ($(this).className != 'mediaplayer-processed') { 
      var playlist = $(this).attr('href'); 
      playlist = playlist.replace("%20", " "); 
      sourceType = playlist.split('.').pop().toLowerCase(); 
      console.log(sourceType); 
      if (sourceType == 'mp3') { 
       sourceType = 'mpeg'; 
      } 
      audioTag = '<audio class="audio-player">' 
      audioTag = audioTag + '<source type="audio/' + sourceType + '" src="' + playlist + '" />'; 
      audioTag = audioTag + '</audio>'; 
      // $(this).outerHTML = audioTag; 
      this.outerHTML = audioTag; 
      config_me = { 
       enableAutosize: true, 
       features: ['playpause', 'volume'], 
       alwaysShowControls: true, 
      }; 
      //config_me.videoHeight = 30; 
      //config_me.videoWidth = 60; 
      config_me.audioWidth = 120; 
      config_me.audioHeight = 30; 
      config_me.loop = false; 
     } 
    }); // each 
    $(".audio-player").addClass('mediaplayer-processed').mediaelementplayer(config_me); 
}); // ready 

공지 사항 내가 config_me.audioWidth = 120;에 width 높은 설정 jsfiddle

참조 두 번째 옵션을 사용하여 전체 작업 코드 .

---

THIRD 아이디어가 audio 요소가 해당 링크를 클릭 한 후 표시 (위의 예에서와 같이하지 페이지로드)해야한다는 경우에, 당신은 .on()를 사용하여 click 이벤트를 바인드 할 필요가 방법 내부.each() 방법.

공지 사항이 경우, (위의 옵션 1과), 각 audio 태그에 다른 클래스를 추가하는 것이 좋습니다입니다 그래서 우리는 각 click 그래서

jQuery(document).ready(function ($) { 
    var audioDiv = document.getElementsByClassName("audio-player"); 
    $(audioDiv).each(function (index) { 
     $(this).on("click", function (e) { 
      if ($(this).className != 'mediaplayer-processed') { 
       var playlist = this.href; // $(this).attr('href'); 
       playlist = playlist.replace("%20", " "); 
       sourceType = playlist.split('.').pop().toLowerCase(); 
       console.log(sourceType); 
       if (sourceType == 'mp3') { 
        sourceType = 'mpeg'; 
       } 
       audioTag = '<audio class="audio-player'+index+'">' 
       audioTag = audioTag + '<source type="audio/' + sourceType + '" src="' + playlist + '" />'; 
       audioTag = audioTag + '</audio>'; 
       // $(this).outerHTML = audioTag; 
       this.outerHTML = audioTag; 
       config_me = { 
        enableAutosize: true, 
        features: ['playpause', 'volume'], 
        alwaysShowControls: true, 
       }; 
       //config_me.videoHeight = 30; 
       //config_me.videoWidth = 60; 
       config_me.audioWidth = 120; 
       config_me.audioHeight = 30; 
       config_me.loop = false; 
       $(".audio-player"+index+"").addClass('mediaplayer-processed').mediaelementplayer(config_me); 
      } 
      return false; 
     }); // on 
    }); // each 
}); // ready 

참조 후 개별적으로 초기화 할 수 있음 jsfiddle