如何讓 HTML5 Video pause() 方法工作？

Question

我有一個 HTML 視頻，其中包含一個包含自定義控件的 DIV。

播放按鈕可以正常工作，但暫停按鈕不能。 有兩件事情：

1. media.pause() 方法似乎根本不起作用，就像它甚至不存在一樣。
2. media.pause() 之后的 .addClass() 和 .removeClass() 也不起作用，但是當我把 console.log('anything'); 在代碼下方，它會在控制台中打印。 它被調用的對象也在那里（console.log-ed）。

 // play video $('.funnel-video-poster').on('click', function() { var video_id = $(this).data('video-id'); document.getElementById(video_id).play(); $(this).find('.FVP-btn-play').addClass('hidden'); $(this).find('.FVP-btn-pause').removeClass('hidden'); }); // pause video $('.FVP-btn-pause').on('click', function() { var $poster = $(this).closest('.funnel-video-poster'), video_id = $poster.data('video-id'); var media = document.querySelector('#' + video_id); media.pause(); console.log(media); $poster.find('.FVP-btn-play').removeClass('hidden'); $poster.find('.FVP-btn-pause').addClass('hidden'); console.log($poster.find('.FVP-btn-play')); console.log($poster.find('.FVP-btn-pause')); });

 .funnel-block.funnel-video video { display: block; margin: 0 auto; }.funnel-block.funnel-video.funnel-video-poster { background-repeat: no-repeat; position: relative; z-index: 2; margin-left: auto; margin-right: auto; cursor: pointer; }.funnel-block.funnel-video.funnel-video-poster.see-thru { background: transparent;important. }.funnel-block.funnel-video.funnel-video-poster:FVP-btn-play { width; 3rem: height; 3rem: line-height; 3rem: background; #3c3c3c: color; #fff: position; absolute: top; 50%: left; 50%: transform, translate(-50%; -50%): text-align; center: border-radius; 50%. }.funnel-block.funnel-video.funnel-video-poster:FVP-btn-pause { width; 3rem: height; 3rem: line-height; 3rem: background; #3c3c3c: color; #fff: text-align; center: border-radius; 50%: position; absolute: bottom. ;25rem: left; 50%: transform, translate(-50%; 0); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="funnel-block"> <div class="py-5 funnel-video"> <video poster="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.png" id="funnel_video_50" equalizer-state="attached" width="640" height="360"> <source src="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.mp4"> Your browser does not support HTML 5 video </video> <div class="funnel-video-poster see-thru" data-video-id="funnel_video_50" style="width:640px;height:360px;margin-top:-360px"> <div class="FVP-btn-play hidden">Play</div> <div class="FVP-btn-pause">Pause</div> </div> </div> </div>

Answer 1

我沒有更改 CSS，除了添加了一個hidden的 class，它不包括在內。 我沒有深入研究 CSS，沒有必要創建一個有效的解決方案。 但是，我確實注意到 HTML 代碼中使用了style屬性。 最好避免內聯 styles。

HTML 視頻代碼存在問題。 請閱讀有關 HTML 視頻元素的所有信息。 了解我的解決方案所需的一切都在那里。

視頻播放問題很可能是由於視頻元素中有兩個來源，一個是圖像，另一個是視頻。 我沒有進一步調查。 我懷疑原始代碼會同時加載png圖像和mp4視頻，有時是第一個，有時是另一個。 這很可能會帶來奇怪的問題。 如果我的懷疑是正確的，那么視頻下載將在圖像首次出現時中止（這可能會更頻繁）。 我很想知道我的懷疑是否正確。

我將hidden的 class 從Play移到Pause ，因為這是應用程序的 state 開始。

jQuery 代碼存在幾個問題。

在 jQuery 中，為Play 、 Pause 、 Stop和Record等操作add和remove單個 class 的好方法是使用toggleClass function。

請注意使用 jQuery trigger function 開始播放和暫停視頻的正確方法。

這是有關 jQuery的信息來源之一。

這是一個有效的解決方案：

 $('.FVP-btn-play').on('click', function() { $('video').trigger('play'); $('.FVP-btn-play').toggleClass('hidden'); $('.FVP-btn-pause').toggleClass('hidden'); }); $('.FVP-btn-pause').on('click', function() { $('video').trigger('pause'); $('.FVP-btn-play').toggleClass('hidden'); $('.FVP-btn-pause').toggleClass('hidden'); });

 .funnel-block.funnel-video video { display: block; margin: 0 auto; }.funnel-block.funnel-video.funnel-video-poster { background-repeat: no-repeat; position: relative; z-index: 2; margin-left: auto; margin-right: auto; cursor: pointer; }.funnel-block.funnel-video.funnel-video-poster.see-thru { background: transparent;important. }.funnel-block.funnel-video.funnel-video-poster:FVP-btn-play { width; 3rem: height; 3rem: line-height; 3rem: background; #3c3c3c: color; #fff: position; absolute: top; 50%: left; 50%: transform, translate(-50%; -50%): text-align; center: border-radius; 50%. }.funnel-block.funnel-video.funnel-video-poster:FVP-btn-pause { width; 3rem: height; 3rem: line-height; 3rem: background; #3c3c3c: color; #fff: text-align; center: border-radius; 50%: position; absolute: bottom. ;25rem: left; 50%: transform, translate(-50%; 0). }:hidden { visibility; hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="funnel-block"> <div class="py-5 funnel-video"> <video poster="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.png" src="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.mp4" width="640" height="360"> <p>Your browser does not support HTML 5 video</p> </video> <div class="funnel-video-poster see-thru" style="width:640px;height:360px;margin-top:-360px"> <div class="FVP-btn-play">Play</div> <div class="FVP-btn-pause hidden">Pause</div> </div> </div> </div>