Question

虽然我的问题可能类似于hide video container when there's no video in database to be displayed HTML PHP中的问题，但我正在寻找一个Javascript / jQuery解决方案。

基本上我需要实现的效果是当html5＆lt; video＆gt;标签无法从其src加载视频，我希望隐藏视频标签所包含的div，最好使用jQuery解决方案，除非有一个非常简单的方法来执行此操作，我已经看过了。

到目前为止我看到的相似：

<div id="video">
          <video controls="controls" width="320" height="240">
              <source src="published/video.mp4" type="video/mp4" />
          </video>
      </div>

非常感谢任何输入。

Answer 1

您可以使用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?

Answer 2

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" 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

复制

Answer 3

这是一个纯粹的js解决方案：

document._video = document.getElementById("video");

document._video.addEventListener('error',function(){
   $(document._video).hide()
 });

您也可以查看以下链接了解其他视频事件：

http://www.w3.org/2010/05/video/mediaevents.html

如果无法使用Javascript / jQuery加载视频，请隐藏视频容器

3 个答案: