জিকুয়ারি ব্যবহার করে এইচটিএমএল 5 টি ভিডিও প্লে / বিরতি দিন

Question

আমি জিকিউরি ব্যবহার করে এইচটিএমএল 5 ভিডিওগুলি নিয়ন্ত্রণ করার চেষ্টা করছি। আমার একটি ট্যাবড ইন্টারফেসে দুটি ক্লিপ রয়েছে, মোট ছয়টি ট্যাব রয়েছে, অন্যদের কাছে কেবল চিত্র রয়েছে। আমি যখন ভিডিওগুলি ক্লিপগুলি তাদের ট্যাবটি ক্লিক করা হয় তখন প্লে করার চেষ্টা করছি এবং অন্যদের মধ্যে যখন কেউ ক্লিক করা হয় তখন বন্ধ হয়ে যায়।

এটি অবশ্যই করা সহজ জিনিস হতে পারে তবে আমি মনে করি এটি কাজ করে না, ভিডিওটি খেলতে আমি যে কোডটি ব্যবহার করছি তা হ'ল:

$('#playMovie1').click(function(){
  $('#movie1').play();
      });

আমি পড়েছি ভিডিও নিয়ন্ত্রণ করার জন্য ভিডিও উপাদানটি কোনও ফাংশনে প্রকাশ করা দরকার তবে একটি উদাহরণ খুঁজে পাচ্ছি না। আমি জেএস ব্যবহার করে এটি কাজ করতে সক্ষম হয়েছি:

document.getElementById('movie1').play();

যেকোন পরামর্শই মহৎ হবে। ধন্যবাদ

Answer 1

আপনার সমাধানটি এখানে সমস্যাটি দেখায় - playএকটি jQuery ফাংশন নয় তবে DOM উপাদানটির ফাংশন। সুতরাং আপনাকে এটি ডম উপাদানটির উপর কল করতে হবে। নেটিভ ডিওএম ফাংশনগুলির সাহায্যে এটি কীভাবে করা যায় তার একটি উদাহরণ দিন। JQuery সমতুল্য - আপনি যদি কোনও বিদ্যমান jQuery নির্বাচনের সাথে মানানসই এটি করতে চেয়েছিলেন - হবে $('#videoId').get(0).play()। ( getjQuery নির্বাচন থেকে নেটিভ ডোম উপাদান পায়))

Comments

এটি দুর্দান্ত, পুরোপুরি কাজ করে, ধন্যবাদ সত্যই। ডিওএম আরও ভালভাবে বুঝতে ভাল।

— বার্নি 83

এইভাবে ভিডিও নিয়ন্ত্রণ করতে JQuery ব্যবহার করা আইফোনটিতে প্লেব্যাক নিয়ে সমস্যা দেখা দেয়। আমার কাছে একটি ট্যাবে ভিডিও উপাদান রয়েছে, জ্যাকোয়ারি এটি প্রকাশ করে তবে ভিডিও স্টার্ট তীরটিতে ক্লিক করা ক্লিপটি শুরু করে না। আমি যখন $ ('# ভিডিওআইডি') সরিয়ে ফেলি তখন। (0) .প্লে () লাইনটি কোনও সমস্যা নেই। এই কাছাকাছি সেরা উপায় কি? আমি ভাবছিলাম যে আমি আইওএসের জন্য কনডিশনাল স্টেটমেন্ট দিয়ে জেএসগুলি সরিয়ে ফেলতে পারি - ভিডিওটি আইওএস ডিভাইসগুলির জন্য যে কোনওভাবেই অটোস্টার্ট করবে না তাই এটি করতে পেরে খুশি হবে - বা এর আরও সহজ সমাধান আছে কি? যে কোনও সহায়তা অনেক প্রশংসিত।

— বার্নি 83

কীভাবে আমি কোনও পৃষ্ঠার সমস্ত <ভিডিও> উপাদানকে এই বিরতি দিতে পারি ?

— প্রিজমপেক্স

@ রাসেলসায়শি - না, এটি কেবল একটি ভিডিও প্লে করবে; প্রিজমপেকগুলি সমস্ত ভিডিওর জন্য জিজ্ঞাসা করেছিল। সঠিক বাক্য গঠন: $('video').each(this.play());সমস্ত খেলতে; $('video').each(this.pause());সমস্ত বিরতি। each()এটি একটি jQuery ফাংশন, যা এতে প্রবেশ করা হয় তা একটি জাভাস্ক্রিপ্ট ফাংশন, যা প্রতিটি উপাদানকে প্রয়োগ করা হয়। প্রতিটি উপাদান যেমন পরিচালনা করা হয় ততই thisসেই উপাদানটি উপস্থাপন করে।

— টুলমেকারস্টেভ

যদি কেবলমাত্র প্রথম উপাদানটি চান তবে এর .get(0)সাথে প্রতিস্থাপন করে সহজ করতে পারেন [0]। সুতরাং $('video')[0].play();বা একটি নির্দিষ্ট আইডি জন্য $('#videoId')[0].play();।

— টুলমেকারস্টেভ

Answer 2

আমি এটিকে এভাবে কাজ করতে সক্ষম করেছিলাম:

jQuery( document ).ready(function($) {
    $('.myHTMLvideo').click(function() {
        this.paused ? this.play() : this.pause();
    });
});

আমার সমস্ত এইচটিএমএল 5 ট্যাগগুলিতে 'মাইএইচটিএমএল ভিডিও' ক্লাস রয়েছে

Comments

নোট করুন যে jQuery এ মোড়ানোর দরকার নেই যাতে আপনি এর সাথে টার্নারি লাইনটি প্রতিস্থাপন করে সেই ওভারহেডটি বাঁচাতে পারেন:this.paused ? this.play() : this.pause();

— পিট ওয়াটস

Answer 3

আপনি করতে পারেন

$('video').trigger('play');
$('video').trigger('pause');

Comments

আপনি এমনকি টগল করতে পারেন: $ ('ভিডিও') trigger ট্রিগার ($ ('ভিডিও') (

— দারো পিএম

Answer 4

আপনার jQuery ব্যবহার করার দরকার নেই কেন? আপনার প্রস্তাবিত সমাধানটি কাজ করে এবং এটি সম্ভবত jQuery অবজেক্ট তৈরির চেয়ে দ্রুত।

document.getElementById('videoId').play();

Comments

আপনি যদি কোন jQuery বাস্তবায়নের জন্য জিদ করেন তবে একাকীকরণের সমাধানটি দেখুন (আপনি কেবল playএকটি jQuery অবজেক্টে কেন কল করতে পারবেন না তার একটি ব্যাখ্যাও )।

— সুডো

আমি ভাবছিলাম আমি কোডটি অন্য jQuery এর মধ্যে ব্যবহার করব, এবং সম্ভবত এটি করব, তবে এটি যেমন দাঁড়িয়ে আছে আমি কেবল সেই লাইনটি ব্যবহার করছি তাই আমার ধারণা যে এটি আমার কোডটি দিয়ে করা যেতে পারে ... আমিও নিশ্চিত ছিলাম না যদি মিশ্রিত করা ভাল অনুশীলন ছিল। যাইহোক পরামর্শের জন্য ধন্যবাদ।

— বার্নি 83

যদি আপনি ইতিমধ্যে জন্য একটি jQuery বস্তুর instantiated থাকেন তাহলে movie1মাধ্যমে $('movie1')অন্যান্য jQuery এর ক্রিয়া, তাহলে এটি ঠিক আছে জন্য; তবে, আপনি যদি এই এক জায়গায় এটি করছেন তবে আপনি কিছু কার্যকারিতা হারাতে চলেছেন। এটি যথেষ্ট লক্ষণীয় নাও হতে পারে তবে আমি অনেকটা অনুকূল করতে চাই।

— sudo কাজ

@ সুডাওর্ক - সিরিয়াসলি? আপনি যখন ভিডিও প্লে শুরু করছেন তখন পারফরম্যান্স ক্ষতি সম্পর্কে আলোচনা করছেন? যদি আপনার ডিভাইসটি ভিডিও চালানোর পক্ষে যথেষ্ট দ্রুত হয় তবে এটি ব্যবহারকারীকে লক্ষ্য না করেই একবারে jQuery ক্রিয়াকলাপ করার পক্ষে যথেষ্ট দ্রুত fast

— টুলমেকারস্টেভ

Answer 5

একাধিক ভিডিও থামানোর জন্য আমি খুঁজে পেয়েছি যে এটি দুর্দান্তভাবে কাজ করে:

$("video").each(function(){
    $(this).get(0).pause();
});

এটি একটি ক্লিক ফাংশন করা যেতে পারে যা বেশ সহজ।

Comments

আপনি এর মতো একই কাজটি করতে পারেন: $ ("ভিডিও")। প্রতিটি (ফাংশন () {this.pause ()});

— মার্সেল এম।

$ (এটি) -> আপনি "এই" অবজেক্ট থেকে জেকারি অবজেক্ট তৈরি করেন। (0) -> আপনি jquery অবজেক্ট থেকে মূল "এই" অবজেক্টটি ফিরে পাবেন ... এটি === $ (এটি) .get (0)

— ব্ল্যাকফায়ার

Answer 6

একাকী দিনের উত্তরটির এক্সটেনশন হিসাবে, আপনি এটিও ব্যবহার করতে পারেন

$('#playMovie1').click(function(){
    $('#movie1')[0].play();
});

লক্ষ্য করুন যে কোনও get () বা eq () jQuery ফাংশন নেই। ডোম এর অ্যারে কল () ফাংশন কল করতে ব্যবহৃত হয়। এটি মাথায় রাখতে একটি শর্টকাট।

Answer 7

আমার এটা ভাল লেগেছে:

$('video').click(function(){
    this[this.paused ? 'play' : 'pause']();
});

আশা করি এটা সাহায্য করবে.

Answer 8

আমি একটি ভিডিও এম্বেড করার জন্য ফ্যান্সিবক্স এবং jQuery ব্যবহার করি। এটি একটি আইডি দিন।

সম্ভবত সেরা সমাধানটি অন্যভাবে খেলতে / বিরতি দিতে পারে না - তবে আমার এবং আইটি ওয়ার্কসের পক্ষে সহজ! :)

মধ্যে

`

<input type="hidden" id="current_video_playing">

<input type="hidden" id="current_video_status" value="playing">

<video id="video-1523" autobuffer="false" src="movie.mp4"></video>

<script>

// Play Pause with spacebar

$(document).keypress(function(e) { 

    theVideo = document.getElementById('current_video_playing').value

    if (e.which == 32) {

        if (document.getElementById('current_video_status').value == 'playing') {

            document.getElementById(theVideo).pause();

            document.getElementById('current_video_status').value = 'paused'

        } else {

            document.getElementById('current_video_status').value = 'playing'

            document.getElementById(theVideo).play();

        }

    }

});

</script>`

Answer 9

এটি আমরা ব্যবহার করতে পারি সহজ পদ্ধতি

ফাংশন jquery বোতামে

$("#button").click(function(event){
    $('video').trigger('play');
    $('video').trigger('pause');
}

ধন্যবাদ

Answer 10

ঠিক একটি নোট হিসাবে, ব্রাউজারটি ভিডিও চালনার চেষ্টা করার আগে আপনি ব্রাউজারটি ভিডিও ফাংশন সমর্থন করে কিনা তা পরীক্ষা করে দেখুন:

if($('#movie1')[0].play)
    $('#movie1')[0].play();

যা ভিডিও ট্যাগ সমর্থন করে না এমন ব্রাউজারগুলিতে জাভাস্ক্রিপ্ট ত্রুটিগুলি রোধ করবে।

Answer 11

জিকুয়েরি নির্বাচক ব্যবহার করে

$("video_selector").trigger('play');  
$("video_selector").trigger('pause');
$("div.video:first").trigger('play');$("div.video:first").trigger('pause');
$("#video_ID").trigger('play');$("#video_ID").trigger('pause');

জাভাস্ক্রিপ্ট দ্বারা আইডি ব্যবহার করে

video_ID.play();  video_ID.pause();

অথবা

document.getElementById('video_ID').play();  document.getElementById('video_ID').pause();

Answer 12

এটা ব্যবহার কর.. $('#video1').attr({'autoplay':'true'});

Comments

"আমি যখন তাদের ট্যাবটি ক্লিক করা হয় তখন ভিডিও ক্লিপগুলি প্লে করার চেষ্টা করছি" - সুতরাং ইভেন্ট নিয়ন্ত্রিত হ্যান্ডলিংয়ের প্রয়োজন।

— ডেভিডকে

Answer 13

আমি এটিকে এটির মতো কাজ করতে বাধ্য করেছিলাম:

$(window).scroll(function() {
    if($(window).scrollTop() > 0)
        document.querySelector('#video').pause();
    else
        document.querySelector('#video').play();
});

Answer 14

@ লোনসমেডে এটিকে সুন্দরভাবে ব্যাখ্যা করেছেন, এখানে একটি সমাধান যা আপনাকে প্লে / বিরতি কার্যকারিতা কীভাবে অর্জন করবেন তা ভাল ধারণা দেয়

ক্লিক করুন ভিডিও প্লে / বিরতি

Answer 15

<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>
<script> 
$(document).ready(function(){
document.getElementById('vid').play(); });
</script> 

Comments

Pl আপনার উত্তরে কিছু ব্যাখ্যা যুক্ত করুন

— সাহিল মিত্তাল

Answer 16

    enter code here
<form class="md-form" action="#">
  <div class="file-field">
    <div class="btn btn-primary btn-sm float-left">
      <span>Choose files</span>
      <input type="file" multiple>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Upload one or more files">
    </div>
  </div>
</form>

<video  width="320" height="240" id="keerthan"></video>

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 
<script>
    (function localFileVideoPlayer() {

  var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')




    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()
function playVid() { 
  keerthan.play(); 
} 

function pauseVid() { 
  keerthan.pause(); 
} 

</script>

Comments

হাই, স্ট্যাক ওভারফ্লোতে আপনাকে স্বাগতম ইতিমধ্যে অনেক প্রশ্নের উত্তর রয়েছে এমন প্রশ্নের উত্তর দেওয়ার সময়, দয়া করে আপনি যে প্রতিক্রিয়া সরবরাহ করছেন তা কেন তাত্পর্যপূর্ণ এবং ইতিমধ্যে মূল পোস্টার দ্বারা যা পরীক্ষা করা হয়েছে তা প্রতিধ্বনিত করছে না সে সম্পর্কে কিছু অতিরিক্ত অন্তর্দৃষ্টি যুক্ত করার বিষয়টি নিশ্চিত হন। এটি "কোড-কেবলমাত্র" উত্তরগুলির ক্ষেত্রে বিশেষত গুরুত্বপূর্ণ যা আপনি সরবরাহ করেছেন।

— chb

Answer 17

var vid = document.getElementById("myVideo"); 
function playVid() { 
  vid.play(); 
} 
function pauseVid() { 
  vid.pause(); 
} 

<video id="myVideo" width="320" height="176">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 

Comments

আপনার উত্তরের সমাধানটি কাজ করছে বলে মনে হচ্ছে না

— ক্রে