如果无法使用 Javascript/jQuery 加载视频,则隐藏视频容器
Posted
技术标签:
【中文标题】如果无法使用 Javascript/jQuery 加载视频,则隐藏视频容器【英文标题】:Hide a video container if video can't be loaded with Javascript/jQuery 【发布时间】:2015-11-29 08:02:09 【问题描述】:虽然我的问题可能与hide video container when there's no video in database to be displayed html php 中的问题相似,但我正在寻找一种 javascript/jQuery 解决方案。
基本上我需要实现的效果是,当html5
到目前为止,我的情况与此类似:
<div id="video">
<video controls="controls" >
<source src="published/video.mp4" type="video/mp4" />
</video>
</div>
非常感谢任何输入。
【问题讨论】:
***.com/questions/5181865/… - 使用它来检查视频是否已加载(可能在一段时间后 w.setInterval())然后隐藏它 【参考方案1】:这里是纯js解决方案:
document._video = document.getElementById("video");
document._video.addEventListener('error',function()
$(document._video).hide()
);
您还可以查看以下链接了解其他视频活动:
http://www.w3.org/2010/05/video/mediaevents.html
【讨论】:
谢谢你!它有效,是一个理想的解决方案:)【参考方案2】:您可以使用http://modernizr.com/ 检测<video>
支持
if (!Modernizr.video) $('#video').hide();
http://modernizr.com/docs/#video
用于检查服务器上是否存在文件 - How do I check if file exists in jQuery or JavaScript?
【讨论】:
【参考方案3】:<!DOCTYPE html>
<html>
<body>
<video controls>
<source src="mov_bb.mp4" type="video/mp4">
<source src="mov_bb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
<a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
<script>
var v = document.querySelector('video'),
sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev)
v.parentNode.style.display = 'none';
, false);
</script>
</body>
</html>
复制自https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Showing_fallback_content_when_no_source_could_be_decoded
【讨论】:
以上是关于如果无法使用 Javascript/jQuery 加载视频,则隐藏视频容器的主要内容,如果未能解决你的问题,请参考以下文章
我无法在 iOs 上使用任何 javascript (jQuery)
使用 JavaScript / JQuery 将 html 表数据导出到 Excel 在 Chrome 浏览器中无法正常工作
Jquery 类选择器无法选择使用 .append() 添加的新类实例