เล่น / หยุดวิดีโอ HTML 5 ชั่วคราวโดยใช้ JQuery


206

ฉันพยายามควบคุมวิดีโอ HTML5 โดยใช้ JQuery ฉันมีสองคลิปในอินเทอร์เฟซแบบแท็บมีแท็บทั้งหมดหกแท็บส่วนอีกคลิปมีแค่ภาพ ฉันพยายามทำให้คลิปวิดีโอเล่นเมื่อมีการคลิกที่แท็บแล้วหยุดเมื่อมีคนอื่นคลิก

นี่เป็นเรื่องง่ายที่จะทำ แต่ฉันไม่สามารถทำงานได้รหัสที่ฉันใช้ในการเล่นวิดีโอคือ:

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

ฉันได้อ่านแล้วว่าองค์ประกอบวิดีโอจำเป็นต้องเปิดเผยในฟังก์ชันเพื่อให้สามารถควบคุมได้ แต่ไม่สามารถหาตัวอย่างได้ ฉันสามารถทำให้มันทำงานโดยใช้ JS:

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

คำแนะนำใด ๆ ที่จะดี ขอบคุณ

คำตอบ:


356

โซลูชันของคุณแสดงปัญหาที่นี่ - playไม่ใช่ฟังก์ชัน jQuery แต่เป็นฟังก์ชันขององค์ประกอบ DOM คุณต้องเรียกมันตามองค์ประกอบ DOM คุณยกตัวอย่างวิธีการทำสิ่งนี้กับฟังก์ชัน DOM ดั้งเดิม เทียบเท่า jQuery - ถ้าคุณต้องการที่จะทำเช่นนี้เพื่อให้สอดคล้องกับการเลือก jQuery ที่มีอยู่ - $('#videoId').get(0).play()จะเป็น ( getรับองค์ประกอบ DOM ดั้งเดิมจากการเลือก jQuery)


5
เยี่ยมมากทำงานได้อย่างสมบูรณ์ขอบคุณจริงๆ ดีที่เข้าใจ DOM ดีขึ้น
Barny83

1
การใช้ JQuery เพื่อควบคุมวิดีโอด้วยวิธีนี้ดูเหมือนจะทำให้เกิดปัญหากับการเล่นบน iPhone ฉันมีองค์ประกอบวิดีโอในแท็บ jquery เปิดเผยสิ่งนี้ แต่จากนั้นคลิกที่ลูกศรเริ่มวิดีโอไม่เริ่มคลิป เมื่อฉันลบบรรทัด $ ('# videoId') รับ (0) .play () บรรทัดไม่มีปัญหา อะไรคือวิธีที่ดีที่สุดในรอบนี้ ฉันคิดว่าฉันสามารถลบ js ด้วยคำสั่งแบบมีเงื่อนไขสำหรับ iOS - วิดีโอจะไม่เริ่มอัตโนมัติสำหรับอุปกรณ์ iOS แล้วดังนั้นจะมีความสุขที่จะทำเช่นนี้ - หรือมีวิธีแก้ปัญหาที่ง่ายกว่า? ความช่วยเหลือใด ๆ ที่ชื่นชมมาก
Barny83

ฉันจะทำให้องค์ประกอบ <video> ทั้งหมดหยุดชั่วคราวบนหน้าเว็บได้อย่างไร
prismspecs

5
@russellsayshi - ไม่นั่นจะเล่นได้แค่วิดีโอเดียวเท่านั้น prismspecs ถามหาวิดีโอทั้งหมด แก้ไขไวยากรณ์: $('video').each(this.play());เพื่อเล่นทั้งหมด; $('video').each(this.pause());เพื่อหยุดทั้งหมด each()เป็นฟังก์ชั่น jQuery สิ่งที่ถูกส่งเข้าไปในนั้นคือฟังก์ชั่น javascript ที่ใช้กับแต่ละองค์ประกอบ เมื่อจัดการแต่ละองค์ประกอบให้thisแสดงองค์ประกอบนั้น
ToolmakerSteve

11
ถ้าเพียง แต่ต้องการองค์ประกอบแรกที่สามารถลดความซับซ้อนโดยการแทนที่ด้วย.get(0) [0]ดังนั้นหรือรหัสที่เฉพาะเจาะจง$('video')[0].play(); $('#videoId')[0].play();
ToolmakerSteve

56

นี่คือวิธีที่ฉันจัดการเพื่อให้ทำงาน:

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

แท็ก HTML5 ทั้งหมดของฉันมีคลาส 'myHTML วิดีโอ'


7
โปรดทราบว่าไม่จำเป็นต้องห่อใน jQuery เพื่อให้คุณสามารถบันทึกค่าใช้จ่ายนั้นโดยแทนที่บรรทัดที่ประกอบไปด้วย:this.paused ? this.play() : this.pause();
Pete Watts


21

ทำไมคุณต้องใช้ jQuery โซลูชันที่เสนอของคุณใช้งานได้และอาจเร็วกว่าการสร้างวัตถุ jQuery

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

ตรวจสอบโซลูชันของ lonesomeday หากคุณยืนยันในการติดตั้ง jQuery (สำหรับคำอธิบายว่าทำไมคุณไม่สามารถโทรหาplayjQuery object ได้)
งาน sudo

ฉันคิดว่าฉันจะใช้รหัสภายใน jQuery อื่น ๆ และอาจจะทำเช่นนั้น แต่เนื่องจากฉันยืนใช้บรรทัดนั้นดังนั้นฉันคิดว่ามันน่าจะใช้ได้กับรหัสที่ฉันมี ... ยังไม่แน่ใจ ถ้านั่นเป็นวิธีปฏิบัติที่ดีในการผสมผสาน ขอบคุณสำหรับคำแนะนำต่อไป
Barny83

2
หากคุณได้แล้ว instantiated วัตถุ jQuery สำหรับmovie1ผ่าน$('movie1')การกระทำของ jQuery อื่น ๆ แล้วก็ปรับ; อย่างไรก็ตามถ้าคุณทำมันในที่เดียวคุณจะพบว่าประสิทธิภาพลดลง มันอาจจะไม่ชัดเจนพอ แต่ฉันชอบปรับให้เหมาะสมมาก ๆ
งาน sudo

@sudowork - จริงจังไหม คุณกำลังพูดถึงการสูญเสียประสิทธิภาพเมื่อเริ่มเล่นวิดีโอ? หากอุปกรณ์ของคุณเร็วพอที่จะเล่นวิดีโอมันก็เร็วพอที่จะทำถัง jQuery โดยไม่สังเกตเห็นผู้ใช้
ToolmakerSteve

19

สำหรับการหยุดวิดีโอหลายครั้งฉันพบว่ามันใช้งานได้ดี:

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

นี้สามารถใส่ลงในฟังก์ชั่นการคลิกซึ่งค่อนข้างมีประโยชน์


4
คุณสามารถทำสิ่งเดียวกันได้เช่น: $ ("วิดีโอ") แต่ละอัน (function () {this.pause ()});
Marcel M.

1
$ (นี่) -> คุณสร้างวัตถุ jquery จากวัตถุ "this" ได้รับ (0) -> คุณจะได้รับวัตถุ "นี้" กลับมาจากวัตถุ jquery ... นี้ === $ (นี้). รับ (0)
Blackfire

14

ในฐานะที่เป็นส่วนขยายของคำตอบของ lonesomeday คุณสามารถใช้

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

โปรดสังเกตว่าไม่มีการเรียกใช้ฟังก์ชัน get () หรือ eq () jQuery อาร์เรย์ของ DOM ใช้เพื่อเรียกใช้ฟังก์ชัน play () มันเป็นทางลัดที่ต้องจำไว้


12

ฉันชอบอันนี้:

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

หวังว่ามันจะช่วย


4

ฉันใช้ FancyBox และ 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>`

3

นี่คือวิธีการง่ายๆที่เราสามารถใช้ได้

ในฟังก์ชั่นคลิกปุ่ม jquery

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

ขอบคุณ


1

โปรดทราบว่าคุณตรวจสอบว่าเบราว์เซอร์รองรับฟังก์ชั่นวิดีโอหรือไม่ก่อนที่จะลองเรียกใช้:

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

ซึ่งจะป้องกันข้อผิดพลาด JavaScript ในเบราว์เซอร์ที่ไม่รองรับแท็กวิดีโอ


1

โดย JQuery ใช้ตัวเลือก

$("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');

โดย Javascript โดยใช้ ID

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

หรือ

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

0

ใช้สิ่งนี้ .. $('#video1').attr({'autoplay':'true'});


2
"ฉันพยายามทำให้คลิปวิดีโอเล่นเมื่อมีการคลิกที่แท็บ" - ดังนั้นจึงจำเป็นต้องมีการจัดการเหตุการณ์ที่ควบคุม
davidenke



0
<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> 

โปรดเพิ่มคำอธิบายลงในคำตอบของคุณ
Sahil Mittal

0
    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>

สวัสดียินดีต้อนรับสู่ Stack Overflow เมื่อตอบคำถามที่มีคำตอบจำนวนมากอยู่แล้วโปรดเพิ่มความเข้าใจเพิ่มเติมว่าทำไมคำตอบที่คุณให้นั้นสำคัญและไม่สะท้อนสิ่งที่ได้รับจากโปสเตอร์ต้นฉบับ นี่เป็นสิ่งสำคัญอย่างยิ่งในคำตอบ "รหัสเท่านั้น" เช่นคำตอบที่คุณให้ไว้
chb

-1

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> 


โซลูชันในคำตอบของคุณดูเหมือนจะไม่ทำงาน
Cray
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.