如何使用声音自动播放视频如果可能的话，如果没有，请静音并显示按钮以取消静音？

发布于 2025-02-03 04:36:27 字数 549 浏览 3 评论 0原文

我在BrightCove Player样本上需要类似的内容：带有Un Sture按钮的自动播放，但对于视频JS，而是用于视频。如何使用此代码执行此操作？

<div class="video-fallback"></div>
<video id="video" onloadstart="this.volume=0.6" loop="" autoplay="">
<source src="" type="video/mp4">
<script type="text/javascript">
  var videos2 = [
  'video4.mp4',
  'video5.mp4',
  'video6.mp4'
  ];
  var count = Math.floor(Math.random() * videos2.length);
  document.getElementsByTagName('source')[0].src = './videos/' + videos2[count];
  </script>
</video>

原文

I need something similar on Brightcove Player Sample: Autoplay with Unmute Button, but not for video-js, but for video. How to do this with this code?

<div class="video-fallback"></div>
<video id="video" onloadstart="this.volume=0.6" loop="" autoplay="">
<source src="" type="video/mp4">
<script type="text/javascript">
  var videos2 = [
  'video4.mp4',
  'video5.mp4',
  'video6.mp4'
  ];
  var count = Math.floor(Math.random() * videos2.length);
  document.getElementsByTagName('source')[0].src = './videos/' + videos2[count];
  </script>
</video>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

呆° 2025-02-10 04:36:27

“我需要类似于BrightCove播放器样本的东西：带有取消静音按钮的自动播放，但对于视频JS，而不是用于视频。如何使用此代码执行此操作？”

？示例 html5覆盖大按钮。

作为给您想法的起点，您可以测试以下所示的代码：
（ eg：在

视频上方上方的图层上的按钮（z index）。调查其他样式选项，例如位置和top和左找到有助于解决问题的设置。

<!DOCTYPE html>
<html>
<body>

<div class="video-fallback">

<img id="icon_big_mute"
onclick="mute_big_click()"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Speaker_Icon.svg/120px-Speaker_Icon.svg.png"
width="200"  height="200" style="position: absolute; z-index: 1; top: 40px; left:50px" />

<video id="video" muted loop autoplay />
<source src="movie.mp4" type="video/mp4">
</video>

</div>

</body>

<script type="text/javascript">

var videos2 = [
'video4.mp4',
'video5.mp4',
'video6.mp4'
];

var count = Math.floor(Math.random() * videos2.length);

var myVid = document.getElementById('video');
var btn = document.getElementById('icon_big_mute');

function mute_big_click()
{
    myVid.muted = false;
    btn.style.visibility = "hidden";
}

</script>

</html>

"I need something similar to Brightcove Player Sample: Autoplay with Unmute Button, but not for video-js, but for video. How to do this with this code?"

You need to search for a tutorial: example html5 overlay big button.

As a starting point to give you ideas, you can test this code shown below:
(eg: test on W3Schools code previewer)...

It uses CSS Styling (see: style=" ") to put the "unmute" button on a layer (z-index) above the video. Investigate the other style options like position and top and left to find settings that help to fix your problem.

<!DOCTYPE html>
<html>
<body>

<div class="video-fallback">

<img id="icon_big_mute"
onclick="mute_big_click()"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Speaker_Icon.svg/120px-Speaker_Icon.svg.png"
width="200"  height="200" style="position: absolute; z-index: 1; top: 40px; left:50px" />

<video id="video" muted loop autoplay />
<source src="movie.mp4" type="video/mp4">
</video>

</div>

</body>

<script type="text/javascript">

var videos2 = [
'video4.mp4',
'video5.mp4',
'video6.mp4'
];

var count = Math.floor(Math.random() * videos2.length);

var myVid = document.getElementById('video');
var btn = document.getElementById('icon_big_mute');

function mute_big_click()
{
    myVid.muted = false;
    btn.style.visibility = "hidden";
}

</script>

</html>

回复收藏 0 原文

~没有更多了~