mediaelement.js changeSkin

Question

भले ही इसमें अधिक दस्तावेज़ीकरण न हो, मैं इस विषय पर पा सकता हूं कि मुझे पता है कि mediaelement.js में आप ऑडियो प्लेयर की त्वचा बदल सकते हैं या अपनी त्वचा बनाने के लिए सीएसएस को संशोधित कर सकते हैं। मैं एक समस्या में भाग रहा हूं जहां मैं ब्राउज़र प्लेयर को प्रतिस्थापित करने के लिए डिफ़ॉल्ट मीडियालेमेंट.जेएस त्वचा भी नहीं प्राप्त कर सकता हूं इसलिए मैं अपनी स्टाइल की ज़रूरतों के लिए डिफ़ॉल्ट सीएसएस को संशोधित नहीं कर सकता। और जब मैं player.changeSkin() विधि का उपयोग करने का प्रयास करता हूं जो mediaelement.js उनकी साइट पर उपयोग करता है, यह प्रोग्राम को रोकता है। मैं त्वचा सीएसएस के साथ-साथ अन्य आवश्यक मीडियालेमेंट.जेएस फाइलों को भी कम से कम अपने ज्ञान के लिए शामिल कर रहा हूं, और जब तक मैं त्वचा को बदलने की कोशिश नहीं करता तब तक खिलाड़ी ठीक काम करता है। मैं ऑडियो स्ट्रीम करने के लिए इस कोड का उपयोग कर रहा हूं और आप http://escapetodenton.com/radio/compact-player.html पर एक वर्किंग वर्जन (प्लेयर को त्वचा की कोशिश करने से पहले अंतिम काम अपलोड कर सकते हैं) पा सकते हैं। किसी कारण से खिलाड़ी स्वयं फ़ायरफ़ॉक्स के मेरे संस्करण में अभी भी प्रस्तुत नहीं कर रहा है, इसलिए यदि आपके पास क्रोम है यानी आपको एक बेहतर विचार मिलेगा कि मैं क्या करने की कोशिश कर रहा हूं।

शीर्षक में आयातित फ़ाइलें:

<script src="build/jquery.js"></script> 
<script src="build/mediaelement-and-player.min.js"></script> 
<link rel="stylesheet" href="build/mediaelementplayer.css" /> 
<link rel="stylesheet" href="build/mejs-skins.css" /> 
<script language="javascript" type="text/javascript"src="http://premiumca5.listen2myradio.com/system/streaminfo.js"></script> 
<link rel="stylesheet" href="compact-player.css" /> 

प्लेयर इन्स्टेन्शियशन और प्रक्षेपण:

var player = new MediaElement('player', { 
pluginPath: '/build/', 
features: ['playpause','progress','current','duration','volume'], 
audioWidth: 400, 
enableAutosize: false, 
iPadUseNativeControls: true, 
iPhoneUseNativeControls: true, 
AndroidUseNativeControls: true, 
success: function(player, node) { 
player.changeSkin('mejs-ted'); 
player.play(); 
} 
}); 

जब से मैं विधि changeSkin() पर किसी भी प्रलेखन नहीं मिल सकता है मैं तो बस उस में उपयोग कर रहा हूँ वैसे ही mediaelement.js को अपने कोड में उनके होम पेज के लिए है। किसी भी मदद या विचारों की सराहना की जाएगी।

Answer 1

आपको अपने वीडियो तत्व पर class="mejs-ted" जोड़ने की आवश्यकता है। ChangSkin() फ़ंक्शन afaik गतिशील रूप से स्किनिंग स्किन के लिए उपयोग किया जाता है। Ie: आप कई स्किन्स प्रदान करना चाहते हैं जो उपयोगकर्ता बीच स्विच कर सकते हैं।

तो अपने वीडियो टैग अपने वर्ग इसे करने के लिए जोड़ लिया है चाहिए, और कुछ इस तरह दिखेगा:

<!-- replace mejs-ted with mejs-yourclass --> 
<video class="mejs-ted" ...> 
    <source type="video/mp4" src="...."> 
    <source type="video/ogg" src="...."> 
    <!-- etc.. --> 
</video> 

MediaElement स्वचालित रूप से वीडियो तत्व पर वर्ग विशेषता के लिए जाँच करता है, और माता पिता के कंटेनर के लिए उस वर्ग कहते हैं इसलिए सभी डीओएम तत्वों को .mejs-yourclass

के साथ उपसर्ग के माध्यम से ओवरराइड किया जा सकता है यदि आप केवल डिफ़ॉल्ट त्वचा सेटिंग को बदलना चाहते हैं तो वर्ग ठीक काम करता है। Mejs-skins.css में उन सभी शैलियों के लिए उदाहरण सीएसएस है जिन्हें आपको अलग-अलग त्वचा के लिए ओवरराइड करने की आवश्यकता है। केवल एक चीज लापता bigplay बटन के लिए शैलियों है:

/* overlay bigplay */ 
.mejs-yourclass .mejs-overlay-button { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100px; 
    height: 100px; 
    margin: -50px 0 0 -50px; 
    background: url(bigplay.png) no-repeat; 
} 

.mejs-yourclass .mejs-overlay:hover .mejs-overlay-button { 
    background-position: 0 -100px; 
} 

उस Git से कार्य करने वाले उदाहरणों मिल जाएगा: https://github.com/johndyer/mediaelement/blob/master/demo/mediaelementplayer-skins.html

Answer 2

शायद यह आलेख InsertHTML पर http://www.inserthtml.com/2013/03/custom-html5-video-player/ आपको अपने मामले में मदद कर सकता है।

यह HTML5 और जावास्क्रिप्ट के साथ कस्टम CSS3 वीडियो प्लेयर डिजाइन करने के लिए mediaelement.js का उपयोग कर रहा है।