Question

我使用的是html5和jQuery。我使用的是Chrome浏览器附带的标准视频播放器。我有两个按钮可以更改源标记中src属性的内容。我知道当我打开Inspect Elements窗口并且向下钻取到源标记时，每次单击其他按钮时src属性都会更改。我不知道我可以使用什么命令在我的脚本中重新加载视频播放器UI。代码：

<head>
<title>video display</title>
<style type="text/css"> 
ul {position : absolute; top:20%; left:70%;}
li {list-style: none;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>

<script>
$(document).ready(function() {
 $("#dogs").click(function() {
  $("#src").attr("src", "../video/dogs.webm");
 });
 $("#fish").click(function() {
  $("#src").attr("src", "../video/fish_dryer.webm");
 });
}); 
</script>

</head>
<body>
    <ul>
        <li><input id="fish" type="button" value="fish dryer" /></li>
        <li><input id="dogs" type="button" value="dogs" /></li>
    </ul>
<video controls>
   <source id="src" src="../video/fish_dryer.webm" type"video/webm">
</video>
</body>

您可以在此处在线查看：http://www.jimslounge.com/myStuff/changeVideo.html

//////////////修正版\\\\\\\\ 只需用你的视频替换视频即可。 感谢Alexander Farkas的解决方案！

<head>
<title>change video</title>
<style type="text/css"> 
ul {position : absolute; top:20%; left:70%;}
li {list-style: none;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function() {
 $("#dogs").click(function() {
     $("#src")
      .prop("src", "../video/dogs.webm")
      .closest('video')
      .trigger('load');
      video.play();
  });
    $("#fish").click(function() {
    $("#src")
      .attr("src", "../video/fish_dryer.webm")
      .closest('video')
      .trigger('load');
      video.play();
 });
}); 
</script>
</head>
<body>
    <ul>
        <li><input id="fish" type="button" value="fish dryer" /></li>
        <li><input id="dogs" type="button" value="dogs" /></li>
    </ul>
<video controls>
   <source id="src" src="">
</video>
</body>

Answer 1

您需要在视频元素上调用load方法。 attr＆lt; - ＆gt;道具改变并不重要，因为属性和属性相互反映（99％的案例）。

$("#src") .prop("src", "../video/fish_dryer.webm") .closest('video') .trigger('load') ;

无法更改视频

1 个答案: