gpt4 book ai didi

javascript - 带有使用视频标签的自定义取消静音按钮的 Vimeo 视频

转载 作者:行者123 更新时间:2023-12-04 10:12:50 30 4
gpt4 key购买 nike

目前,我正在从带有 am html5 <video> 标签的 Vimeo 直接链接自动播放页面加载视频,这在页面上加载视频非常快,并且海报属性也有助于感知加载时间:

<video id="video" poster="abc.jpeg?$staticlink$" playsinline muted>
<source type="video/mp4" src="https://player.vimeo.com/external/408636.hd.mp4?s=1552e499fb1e3aa2bf881c2ae762aa23988b5d&profile_id=175">
</video>

现在我想要一种使用页面上的按钮取消静音的方法,我决定这样做我现在必须使用 Vimeo API player.js 。请参阅下面的代码。我现在遇到的问题是 iframe 加载缓慢,而且 vimeo API 似乎没有海报属性。
  <html>
<div id="video" width="100%" height="100%"></div>
<button class="volume">VOLUME ON</button>
</html>

<script>
var volBtn = document.querySelector('.volume')

var options = {
url: "https://vimeo.com/123/456",
loop: true,
autoplay: true,
background: true
};

var videoPlayer = new Vimeo.Player('video', options);

volBtn.addEventListener('click', () => {
videoPlayer.setVolume(1);
})
</script>

有没有更好的方法来做到这一点,所以我们同时拥有视频标签速度和取消静音的 iframe 能力?我是否遗漏了一些明显的视频或 iframe 标签?我可以在 Vimeo API 中使用视频标签吗?

最佳答案

无需使用player.js为了这。这很简单:

const volBtn = document.querySelector('.volume')
const video = document.querySelector('#video')
volBtn.addEventListener('click', function() { videoEl.muted = false })

另请注意,在 HTMLMediaElement 的帮助下设置静音视频的音量API 让它静音。所以这
volBtn.addEventListener('click', function() { videoEl.volume = 1 })

不会像你期望的那样工作。但这会
volBtn.addEventListener('click', function() {
videoEl.muted = false
videoEl.volume = 1
})

关于javascript - 带有使用视频标签的自定义取消静音按钮的 Vimeo 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61235772/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com