如果无法使用 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/ 检测&lt;video&gt; 支持

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() 添加的新类实例

JavaScript jQuery如果使用.is语句

JavaScript/jQuery:无法获得“WWW-Authenticate”响应标头

在 Javascript / jQuery 中无法检索 Django 模板变量值