我在我網站上的 HTML 背景視頻中添加了一個播放按鈕，以便用戶可以選擇是否播放視頻。使用以下代碼添加了視頻：
<video id="mobilevideo" class="video-full" loop muted playsinline>
<source src="<?php echo esc_url( $videofile ); ?>" type="video/mp4">Your browser does not support the video tag.
</video>
我添加了控制按鈕并對其進行了樣式設定，以便在用戶切換按鈕時圖示可以從播放變為暫停。我對靜音和取消靜音做了同樣的事情。
<a class="playcontrol" href="#">
<img src="<?php echo $pause; ?>" width="18" height="" alt="overlay" class="play">
<img src="<?php echo $play; ?>" width="18" height="" alt="overlay" class="pause">
</a>
<a class="soundcontrol" href="#">
<img src="<?php echo $pause; ?>" width="18" height="" alt="overlay" class="unmute">
<img src="<?php echo $play; ?>" width="18" height="" alt="overlay" class="mute">
</a>
但是，我不希望音頻自行播放。我希望用戶能夠單擊另一個按鈕來啟用或不啟用音頻。
var mobileVideo = document.getElementById("mobilevideo");
$(".video-mobile video").prop('muted', true);
$(".video-mobile .playcontrol").click(function () {
if (mobileVideo.paused) {
mobileVideo.muted = true;
mobileVideo.play();
$(this).addClass('playsound'); // changing icon for button
} else {
mobileVideo.pause();
$(this).removeClass('playsound'); // changing icon for button
}
});
$(".video-mobile .sound-control").click(function () {
if ($(".video-mobile video").prop('muted')) {
$(".video-mobile video").prop('muted', false);
$(this).addClass('playsound'); // changing icon for button
} else {
$(".video-mobile video").prop('muted', true);
$(this).removeClass('playsound'); // changing icon for button
}
});
我遇到的問題是，雖然兩個按鈕都運行良好。單擊播放按鈕會導致視頻取消靜音。我不想要那樣，但我不確定如何讓播放按鈕僅控制播放和暫停而沒有音頻，而另一個按鈕將控制音頻。
任何建議表示贊賞。
uj5u.com熱心網友回復：
最終通過使用視頻事件解決了這個問題。洗掉了該行 -mobileVideo.muted = true;并在下面添加到腳本中以在視頻開始播放后將其靜音：
mobileVideo.addEventListener('play', (event) => {
mobileVideo.muted = true;
});
在該功能啟動之前仍會播放幾毫秒，但它總體上是有效的。它幾乎不引人注目。不過，歡迎對此進行微調的建議。
uj5u.com熱心網友回復：
您可以嘗試使用該volume屬性并將其設定為0. 這是0-1之間的區間。在這種情況下，它將是：mobileVideo.volume = 0;。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363779.html
標籤：javascript html 查询 html5-视频
上一篇：使用引導程式驗證重置整個表單