问题描述
我正在尝试构建一个非常简单的HTML5视频播放器:
I am trying to build a really simple HTML5 video player :
HTML
<div class="col-lg-12 video">
<video id="format-video" width="100%" height="100%" loop="loop" preload="auto">
<source src="Video-AOM.mp4" type="video/mp4" />
<img src="images/fallback.jpg" />
</video>
<img class="background" src="images/video-background.jpg" />
<div class="video-run"></div>
<div class="video-play-pause"></div>
</div>
TYPESCRIPT
TYPESCRIPT
$(document).ready(function () {
if ($('#format-video').length > 0) {
var video = <HTMLVideoElement> document.getElementById('format-video');
video.oncanplaythrough = function () {
$('.video-run').fadeIn(200);
$('.video-run').click(function () {
$(".video .background").fadeOut(200);
$('.video-run').fadeOut(200);
$('.video-play-pause').fadeIn(200);
$('.video-play-pause').on('click',function () {
if (video.paused) {
video.play();
}
else {
video.pause();
}
})
video.play();
});
}
});
因此,当视频可以播放时,一个大的播放按钮会渐渐消失淡出,小暂停/播放淡入。
So when the video can "playthrough", a big "play" button fades in, when cliked in fades out and a small pause/play fades in.
如果我点击按钮播放/暂停,暂停有效,但如果我再次点击它,它只会播放很少秒和冻结或没有任何反应。
If I click the button play/pause, the pause works but then if I click it again it either plays only few seconds and freezes or nothing happens.
我正在测试Chrome 40.0.2214.91米。
I am testing on Chrome 40.0.2214.91 m.
我试过如下所示,设置preload =none:
但没有成功。
I tried to set-up preload="none" as suggested there :HTML5 video controls - Cannot play after pause in chrome onlybut no success.
不确定是否有解决方案。
Not sure if there is a solution.
推荐答案
所以我设法通过设置preload =none解决问题:
So I manage to fixe the problem by setting up preload="none" as suggested there:
并清除谷歌浏览器的缓存(我在发布问题之前没有尝试过)。
AND clear the cache of Google Chrome (which I did not try before I posted the question).
尝试过几次,现在看起来很好。
Tried few times, it looks fine now.
这篇关于HTML5视频播放/暂停问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!