HTML5 वीडियो // पूरी तरह से नियंत्रण छिपाएँ

Question

मैं HTML5 वीडियो नियंत्रणों को पूरी तरह से कैसे छिपा सकता हूं?

<video width="300" height="200" controls="false" autoplay="autoplay">
<source src="video/supercoolvideo.mp4" type="video/mp4" />
</video> 

गलत काम नहीं किया - यह कैसे किया जाता है?

चीयर्स।

Answer 1

इस कदर:

<video width="300" height="200" autoplay="autoplay">
  <source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>

controlsएक बूलियन विशेषता है :

नोट: मूल्यों "सच" और "झूठे" बूलियन विशेषताओं पर अनुमति नहीं है। झूठे मूल्य का प्रतिनिधित्व करने के लिए, विशेषता को पूरी तरह से छोड़ना होगा।

Comments

तो तकनीकी रूप से यह काम करता है; और मुझे लगता है, जवाब है। हालांकि; HTML5 वीडियो मार्क-अप के भीतर 'नियंत्रण' को हटाने, iPad पर वीडियो को मारता है; इसलिए दूसरे समाधान की जरूरत है।

— टेरी हॉल

@ 1977 यह प्रश्न संभवतः प्रासंगिक है

— रोबर्टेक

आप नियंत्रण विशेषता सहित टैग को लोड करने का प्रयास कर सकते हैं और कुछ जावास्क्रिप्ट के साथ पगेलॉड के बाद इसे हटा सकते हैं: var वीडियो = document.getElementById ('myvideo'); video.control = false;

— user3072843

The values "true" and "false" are not allowed on boolean attributes। भ्रमित करने वाली बात।

— NotLizards

@jammypeach गुण बूलियन हैं क्योंकि उनके पास दो राज्य हैं: वे मौजूद हैं या वे नहीं हैं

— robertc

Answer 2

आप सीएसएस छद्म चयनकर्ताओं जैसे डेमो: https://jsfiddle.net/g1rsasa3 का उपयोग करके नियंत्रण छिपा सकते हैं

//For Firefox we have to handle it in JavaScript 
var vids = $("video"); 
$.each(vids, function(){
       this.controls = false; 
}); 
//Loop though all Video tags and set Controls as false

$("video").click(function() {
  //console.log(this); 
  if (this.paused) {
    this.play();
  } else {
    this.pause();
  }
});

video::-webkit-media-controls {
  display: none;
}

/* Could Use thise as well for Individual Controls */
video::-webkit-media-controls-play-button {}

video::-webkit-media-controls-volume-slider {}

video::-webkit-media-controls-mute-button {}

video::-webkit-media-controls-timeline {}

video::-webkit-media-controls-current-time-display {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Hiding HTML5 Video Controls using CSS Pseudo selectors -->

<video width="800" autoplay controls="false">
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

Comments

यह क्रोम के लिए बहुत अच्छा काम करता है लेकिन फ़ायरफ़ॉक्स नहीं। क्या आपके पास एक क्रॉस-ब्राउज़र समाधान है?

— टाइनीटेगर

सीएसएस या जावास्क्रिप्ट के साथ उन्हें हटाने की आवश्यकता है क्योंकि मैं एक साथ कुछ हैक कर रहा हूं और वीडियो टैग कोड को सीधे संपादित नहीं कर सकता

— TinyTiger

हे बेनी मोज़िला के लिए। आपको "-मोज़-मीडिया-कंट्रोल-प्ले-बटन" जैसे सभी के लिए वेंडर उपसर्ग सीएसएस जोड़ने की आवश्यकता है। धन्यवाद

— AbidCharlotte49er

उपसर्ग जोड़ने की कोशिश की, लेकिन यह काम नहीं किया। यहाँ एक अपडेटेड JSfiddle है और यहाँ CSS I प्रयोग किया गया हैvideo::-webkit-media-controls, video::-moz-media-controls, video::-o-media-controls, video::-ms-media-controls { display: none !important; }

— TinyTiger

बेनी, मैंने मोज़िला दस्तावेज़ में जाँच की कि उन विक्रेताओं ने पहले से छद्म सीएसएस उपलब्ध नहीं है। आप इसे जावास्क्रिप्ट पर संभाल सकते हैं। कृपया मेरा कोड स्निपेट देखें। ऊपर । मैंने अपना मूल समाधान संपादित किया है। "फ़ायरफ़ॉक्स के लिए हमें इसे जावास्क्रिप्ट में संभालना होगा" धन्यवाद सौभाग्य

— AbidCharlotte49er

Answer 3

एक सरल उपाय है - बस उपयोगकर्ता इंटरैक्शन को अनदेखा करना :-)

video {
  pointer-events: none;
}

Comments

यह काम करता है सिवाय इसके कि नियंत्रण प्रारंभिक भार पर दिखाए जाते हैं।

— m4n0

Answer 4

सबसे पहले, वीडियो के "नियंत्रण" विशेषता को हटा दें।
IOS के लिए, हम निम्नलिखित CSS छद्म चयनकर्ता को जोड़कर वीडियो के बिल्ड प्ले बटन को छुपा सकते हैं:

video::-webkit-media-controls-start-playback-button {
    display: none;
}

Answer 5

इस विधि ने मेरे मामले में काम किया।

video=getElementsByTagName('video');
function removeControls(video){
  video.removeAttribute('controls');
}
window.onload=removeControls(video);

Answer 6

<video width="320" height="240" autoplay="autoplay">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Comments

मैं सहमत हूँ। सबसे सरल उपाय यह है कि कभी भी शुरू करने के लिए विशेषता न डालें।

— PRMan

Answer 7

document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);


function initialiseMediaPlayer() {

    mediaPlayer = document.getElementById('media-video');

    mediaPlayer.controls = false;

    mediaPlayer.addEventListener('volumechange', function(e) { 
        // Update the button to be mute/unmute
        if (mediaPlayer.muted) changeButtonType(muteBtn, 'unmute');
        else changeButtonType(muteBtn, 'mute');
    }, false);  
    mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); 
}

Comments

<! - संपूर्ण पाठ से करें <script src = 'media-player.js'> </ script> और उसी निर्देशिका में डालें ->

— user6884687