Question

我正在尝试创建一个ASP.NET页面并在其上使用一些HTML5。其中大部分来自w3schools的例子。

修改的我使用chrome作为我的主要测试浏览器。 mp4和ogg都不能在firefox中运行，整个视频标签在ie8中都不起作用。因为我使用xp，ie9是不可能的。如果需要，我可以安装歌剧或野生动物园...让我知道它是否有帮助。

守则：

<div> 
<video id="movieid" width="420">
<source src="movie.mp4" type="video/mp4" />
<source src="oggbestand.ogg" type="video/ogg" />
<p>Als uw browser te oud is, word deze melding weergegeven. Excuses voor het ongemak!</p>
</video>
<button onclick="playPause()">Play/Pause</button> 
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<button onclick="makeBig()">Big</button>
<br /> 
</div>  

<script>
function playPause() {
var myVideo = document.getElementById("movieid");
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
var myVideo = document.getElementById("movieid");
myVideo.width = 560;
}
function makeSmall() {
var myVideo = document.getElementById("movieid");
myVideo.width = 320;
}
function makeNormal() {
var myVideo = document.getElementById("movieid");
myVideo.width = 420;
} 
</script>

问题： 上面的四个按钮似乎工作。但是，不知何故页面刷新了什么，将视频恢复到原始大小。任何人都可以帮我解决这个问题，甚至解决它吗？

感谢您的帮助！

Answer 1

每当您单击按钮时，您将触发回发，所以这里发生的是你正在运行一些编辑你的HTML的JavaScript代码，然后触发一个完整的回发，这将为你提供一个全新的HTML页面。

简单修复：添加“return false;”

<button onclick="playPause(); return false;">Play/Pause</button> 
<button onclick="makeBig(); return false;">Big</button>
<button onclick="makeSmall(); return false;">Small</button>
<button onclick="makeNormal(); return false;">Normal</button>

HTML5视频播放/小型等按钮刷新？

1 个答案: