एचटीएमएल 5 ऑडियो टैग कस्टम नियंत्रण?

मुझे लगता है कि मैं यहाँ पागल गोलियां ले रहा हूं क्योंकि मैं यह नहीं समझ सकता कि कस्टम नियंत्रण के साथ एचटीएमएल 5 ऑडियो टैग कैसे प्रस्तुत किया जाए।एचटीएमएल 5 ऑडियो टैग कस्टम नियंत्रण?

मैं अब तक इस एचटीएमएल, और यह कोई समस्या नहीं काम करता है:

<audio controls preload='none'><source src='the url to the audio' type='audio/wav' /></audio>

मैं इसे कैसे केवल प्ले बटन प्रदर्शित करने के लिए मिलता है, और शायद जब खेल, विराम बटन दर्शाते हैं कि यह जगह है में।

मैं क्या पढ़ा से,

डिफ़ॉल्ट रूप से, तत्व प्लेयर नियंत्रण किसी भी प्रकार का खुलासा नहीं करेंगे। आप सादे पुराने एचटीएमएल, सीएसएस, और जावास्क्रिप्ट के साथ अपने स्वयं के नियंत्रण बना सकते हैं। तत्व में प्ले() और रोकें() और जैसे मौजूदा समय के रूप में पढ़ने/लिखने वाली प्रॉपर्टी जैसी विधियां हैं। वॉल्यूम और म्यूट गुण भी पढ़/लिखते हैं। तो आपके पास वास्तव में पर अपना स्वयं का इंटरफ़ेस बनाने की आवश्यकता है।
If you don’t want to build your own interface, you can tell the 
ब्राउज़र नियंत्रण के एक सेट में प्रदर्शित करने के लिए ब्राउज़र। ऐसा करने के लिए, बस में आपके टैग में नियंत्रण विशेषता शामिल है।

लेकिन मुझे कस्टम नियंत्रणों का उपयोग करने के कोई उदाहरण नहीं मिल रहे हैं। आप केवल प्ले बटन कैसे प्राप्त करते हैं?

स्रोत

2011-10-03 Levitikon

तुम इतनी तरह अपने तत्वों को बनाने के ...

<audio id="yourAudio" preload='none'> 
    <source src='the url to the audio' type='audio/wav' /> 
</audio> 
<a href="#" id="audioControl">play!</a>

और कुछ कार्यक्षमता जोड़ने:

var yourAudio = document.getElementById('yourAudio'), 
    ctrl = document.getElementById('audioControl'); 

ctrl.onclick = function() { 

    // Update the Button 
    var pause = ctrl.innerHTML === 'pause!'; 
    ctrl.innerHTML = pause ? 'play!' : 'pause!'; 

    // Update the Audio 
    var method = pause ? 'pause' : 'play'; 
    yourAudio[method](); 

    // Prevent Default Action 
    return false; 
};

अभी, बटन सिर्फ साधारण पाठ है ("खेलते हैं!" या "थामने! "), लेकिन आप सीएसएस के साथ जो कुछ भी चाहते थे उसके बारे में आप कर सकते थे। innerHTML सेट करने के बजाय, className सेट करें और आप जाने के लिए अच्छे हैं!

स्रोत

2011-10-03 18:54:54 sdleihssirhc

Aaaaah कर सकते हैं, मैं देख रहा हूँ .. – Levitikon

अच्छा !! मैंने इस से एक jsfiddle बनाया: http://jsfiddle.net/pLjM7/ –

मैं प्लेयर के बजाए ग्राफिक के उपयोग के साथ प्रयोग कर रहा हूं। शैली को 'ऑडियो' टैग में "डिस्प्ले: सेट करें: चौड़ाई: 0 पीएक्स; ऊंचाई: 0 पीएक्स;" (प्रदर्शन कोई भी आईपैड पर काम नहीं करता है, इस प्रकार अतिरिक्त चौड़ाई -0 और ऊंचाई -0 सेटिंग्स)। "नियंत्रण" विशेषता भी शामिल नहीं होना चाहिए। (विभिन्न प्रणालियों/सभी कार्य अलग ढंग से आईओएस बनाम & डेस्कटॉप ब्राउज़र .....)

उदाहरण के लिए:

<head> 
<script> 
function EvalSound(soundobj) { 
    var thissound=document.getElementById(soundobj); 
    thissound.play(); 
} 
</script> 
</head> 

<body> 
Click the speaker to hear the sound. <a href="javascript:null()" onClick="EvalSound('sound1'); return false;"> 
<img src="sound_icon.png" alt="" title="sound_icon" width="" height="" class="" /></a> 
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="sound.mp3" controls preload="auto" autobuffer> 
</body>

"जावास्क्रिप्ट: अशक्त()" के साथ संयोजन के रूप में iPad पर काम करता है "return false;" सामान्य "#" के विपरीत के रूप में।

अधिक वास्तव में उपयोगी जानकारी के लिए: http://www.phon.ucl.ac.uk/home/mark/audio/play.htm

स्रोत

2012-11-14 01:57:37 Johnathan

आपको शैली को "डिस्प्ले: none;" पर सेट करने की आवश्यकता नहीं है। यदि आप देखते हैं कि आपके पास "नियंत्रण" टैग है। यह एक बुलियन के रूप में कार्य करता है यह निर्धारित करने के लिए कि खिलाड़ी दिखाया गया है या नहीं। बस इससे छुटकारा पाएं और आपको किसी भी इनलाइन सीएसएस को शामिल नहीं करना होगा। – Booker

अफसोस की बात है कि उपरोक्त 'अधिक वास्तव में उपयोगी जानकारी' लिंक टूटा हुआ प्रतीत होता है, लक्षित वाष्पीकरण। – Opsimath

अगर आप चाहते हैं अंतर्निहित चलाएं बटन केवल आप:

उपयोग autio-टैग के वर्ग विशेषता:

<audio controls preload='auto' class="audio_volume_only"><source src='the url to the 
audio' type='audio/mp3' /></audio>

और फिट सीएसएस:

.audio_volume_only { 
    width: 35px; 
    }

मुझे उम्मीद थी controls में कुछ पैरामीटर हैं, but not found any or misunderstood .. हम देखेंगे।

तो संभवतः सीएसएस को आपकी आवश्यकता के अनुसार बदलने के लिए audio's onplay - event का उपयोग करें। प्ले-बटन में निर्मित नियंत्रण

में ठहराव बटन हो जाएगा के रूप में अन्य लोगों ने बताया, आप हमेशा अपनी खुद की ....

स्रोत

2014-01-14 16:21:40 womd

एचटीएमएल 5 ऑडियो टैग कस्टम नियंत्रण?

उत्तर

संबंधित मुद्दे