Html5视频:播放/暂停自定义按钮问题
html5 video: play/pause custom button issue
我在我的网站上使用HTML5视频,使用一些其他代码,基本上使可用性更加定制。
视频在可视范围内播放,不在可视范围内暂停。此外,当鼠标悬停在视频上时,它还有一个播放和暂停按钮。
在视频结束时,它会变成一个图像,因为在默认情况下html5视频会变成空白。
问题是,图像出现在最后,但播放/暂停继续出现在悬停和功能播放暂停,但只有音频。你无法看到视频。
我最初想让它只显示图片。但是如果视频结束,我希望播放暂停变成重新开始按钮。
我试着寻找适合我现有设置的东西,但我不确定如何使其发生,以及我将使用哪些代码。
这是该网站的链接http://minhasdistillery.com/blumersmoonshine/
<section id="feature">
<div id="trail">
<div id="videocontrol">
<a id="play-pause" class="play"><img src="images/pause.png"/></a>
</div>
<video id="video_background" preload="auto" volume="5"><!--or turn on loop="loop"-->
<source src="videos/video.webm" type="video/webm">
<source src="videos/video.mp4" type="video/mp4">
<source src="videos/video.ogv" type="video/ogg ogv">
</video>
<img id="image_background" src="images/blumer.jpg" width="100%" height="100%" />
</div><!--trail-->
</section><!--feature-->
显示播放/暂停按钮的Javascript
<script>
window.onload = function() {
var video = document.getElementById("video_background");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function() {
if (video.paused == true) {
video.play();
playButton.innerHTML = "<img src='images/pause.png'/>";
} else {
video.pause();
playButton.innerHTML = "<img src='images/play.png'/>";
}
});
}
</script>
代码设置视频在可见时播放,否则暂停
<script>
//play when video is visible
var videos = document.getElementsByTagName("video"), fraction = 0.8;
function checkScroll() {
for(var i = 0; i < videos.length; i++) {
var video = videos[i];
var x = 0,
y = 0,
w = video.offsetWidth,
h = video.offsetHeight,
r, //right
b, //bottom
visibleX, visibleY, visible,
parent;
parent = video;
while (parent && parent !== document.body) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
r = x + w;
b = y + h;
visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));
visible = visibleX * visibleY / (w * h);
if (visible > fraction) {
video.play();
} else {
video.pause();
}
}
}
window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
//check at least once so you don't have to wait for scrolling for the video to start
window.addEventListener('load', checkScroll, false);
checkScroll();
</script>
这个在最后添加了照片。
<script>
var video = document.getElementById('video_background');
var wrapper = document.getElementById('wrapper');
var image = document.getElementById('image_background');
video.addEventListener('ended', function() {
video.style.display = 'none';
image.style.display = 'inline';
}, false);
</script>
相同问题的JSBin在这里JSBin For Issue
就像你在视频结束时看到的那样,它将继续显示暂停和播放,并且只播放音频。如何让它读取视频结束并将按钮切换到"重播"
初始视频display
样式为block
,图像display
样式为none
。视频ended
事件处理程序设置视频display
为none
,图像display
为inline
。您可以在按钮click
事件处理程序中检查视频display
样式并切换它:
playButton.addEventListener(
'click',
function(event) {
if (video.style.display === 'none') {
image.style.display = 'none';
video.style.display = 'block';
}
...
},
false
);
作为一个替代添加布尔标志,最初设置为false
,在视频ended
事件设置为true
:
var needReplay = false;
video.addEventListener(
'ended',
function() {
...
needReplay = true;
},
false
);
playButton.addEventListener(
'click',
function(event) {
if (needReplay) {
image.style.display = 'none';
video.style.display = 'block';
needReplay = false;
}
...
},
false
);
演示相关文章:
- WooCommerce的“添加到购物车”按钮旁边的自定义按钮基于产品类型
- 将自定义按钮添加到现有网站
- 在“添加自定义按钮”旁边添加自定义按钮;添加到CART”;WooCommerce的按钮
- 谷歌日历自定义按钮
- jqgridnavgrid在搜索按钮和自定义按钮之后添加按钮
- 如何确定控件/插件是否从 CRM 2011 中功能区上的自定义按钮触发
- WordPress TinyMCE自定义按钮与输入类型编号
- Javascript使用自定义按钮手动打开Kendo UI网格编辑器
- Highmaps-使用导出创建自定义按钮
- 在jqGrid中的行中添加自定义按钮
- 如何使用tinymce在选择更改时启用/禁用自定义按钮
- 如何使用mediaelement,js脚本在html播放器中添加自定义按钮
- 使用自定义按钮控制Soundcloud HTML5 Widget Player
- 谷歌地图自定义按钮与标准风格
- 使用 Jquery 自定义按钮和滑块(大小、位置、标题大小)
- 带有谷歌地图绘图的自定义按钮
- 如何在 JQuery Mobile 中的列表视图中拥有自定义按钮
- 引导模式的自定义按钮事件多次显示
- ckeditor 4 jQuery Adapter, 如何添加自定义按钮.
- 自定义按钮上的全屏Vimeo触发事件