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

<a href="#" onclick="changeStyle()"><i class="fa fa-play-circle"></i></a>

<video controls poster="source-to-thumb.jpg" id="player" style="object-fit:contain;">
    <source src="source-to-file.mp4" type="video/mp4"/>
</video>

<script>
var video = document.getElementsByTagName('video')[0];
function changeStyle() {
  if(video.style.objectfit === 'fill') {
    video.style.objectFit = 'contain';
  } else {
    video.style.objectFit = 'fill'
  }
}
</script>

किसी भी सुझाव की सराहना की जाएगी धन्यवाद।

0
Ken 14 अप्रैल 2020, 20:52

1 उत्तर

सबसे बढ़िया उत्तर

इनलाइन शैलियों का उपयोग करने के बजाय (जो हमेशा संभव होने पर बचा जाना चाहिए), सीएसएस कक्षाओं का उपयोग करें। तब आप बस कक्षा के उपयोग को टॉगल कर सकते हैं।

साथ ही, अपने अन्य कोड के साथ कुछ मुद्दों को ठीक करने के बारे में मेरी एचटीएमएल, सीएसएस और जावास्क्रिप्ट टिप्पणियां देखें। विशेष रूप से, उन तरीकों से बचें जो "लाइव" नोड सूची लौटाते हैं, जैसे getElementsByTagName()

// Don't scan the whole document for all the matching
// elements when you know that there will only be one.
// Use getElementById() if there is an id.
var video = document.getElementById('player');

// Set up events in JavaScript, not HTML
document.querySelector("i.fa-play-circle").addEventListener("click", function(){
  // Just toggle the use of the other class:
  video.classList.toggle("fill");
});
/* Use CSS classes when possible */

i.fa-play-circle { cursor:pointer; }

/* This will be applied to the video by default */
video {
  object-fit:contain;
  border:1px solid black;
  height:150px;
  width:300px;
}

/* This class will be toggled on and off when the icon is clicked. 
   When it gets toggled on, the new object-fill value will override
   the previous one. When it gets toggled off, the previous style 
   will be restored. */
.fill {
  object-fit:fill;
}
<!-- Don't use hyperlinks just as a JavaScript hook.
     Hyperlinks are for navigation and using them for
     other purposes can cause problems for those using 
     screen readers.
     
     Any visible element supports a click event. Here,
     you can just set up the click event on the <i> element
     that people will be clicking on in the first place.
     
     Also, don't use inline HTML event attributes.
     Instead, separate your JavaScript into a script element.
-->
<i class="fa fa-play-circle">Hit play and then click Me several times</i><br>

<video controls poster="source-to-thumb.jpg" id="player">
    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"/>
</video>
0
Scott Marcus 14 अप्रैल 2020, 18:15