Question

我开始学习html5，我正在尝试使用jquery mobile制作视频播放器。我搜索了代码，我找到了它。我把视频文件放在我的根文件夹中。当我点击链接“播放”时，有一个弹出视频，我可以使用控制按钮播放视频，但问题是，当我尝试在我的浏览器（mozilla firefox）上启动我的html文件时，声音即使我没有点击链接“播放”，视频也会自动播放而不会弹出视频，声音仍会播放。请帮助我如何在视频弹出时播放视频的声音，所以当我在第一时间将文件发送到浏览器时它不再发出声音。我用这个：

<!DOCTYPE html> 
<html> 
	<head> 

	<title></title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head> 
<body> 
<div data-role="page" id="utama" data-theme="a" >
  <div data-role="header"  >
    <h1>header</h1>
  </div>  
  <div data-role="content">
    <p></p>
	<br/>
	<a href="#dialog" data-rel="dialog">play </a>
  </div>  
  <div data-role="footer" >
    <h4> &copy </h4>
  </div>
</div>  
<div data-role="page" id="dialog">
  <div data-role="header"  >
    <h1>video</h1>
  </div>  
  <div data-role="content">
	
	<iframe id="player_1" src="abjad_a.mp4" width="540" height="304" frameborder="0" webkitallowfullscreen=""></iframe>
	<a  data-rel="back"> back</a>

  </div>  
  <div data-role="footer" >
    <h4>&copy </h4>
  </div>
</div>
</div>
</body>
</html>

`

Answer 1

您可以使用HTML5 Video

以HTML格式播放视频在HTML5之前，视频只能在带有插件的浏览器中播放（如闪存）。

HTML5元素指定了在网页中嵌入视频的标准方法。

而不是iframe，您可以通过javascript HTML Audio/Video DOM Reference

自定义视频播放器

请参阅代码段：

var vid = document.getElementById("video_mute");

vid.muted = true;//mute video on window load

function enableMute() { 
    vid.muted = true;
} 

function disableMute() { 
    vid.muted = false;
} 

function checkMute() { 
    alert(vid.muted);
}

<video width="400" id="video_mute" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<button onclick="enableMute()" type="button">Mute sound</button>
<button onclick="disableMute()" type="button">Enable sound</button>
<button onclick="checkMute()" type="button">Check muted status</button><br>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>

当我在浏览器上启动html文件时，如何自动停止播放视频的声音？

1 个答案: