为什么这个webm不播放？

Question

我很困惑，因为webm没有正确地出现。但是当我将代码修改到最小值(如<video controls><source src="http://i.imgur.com/91S22q6.webm" type="video/webm" codecs="vp8, vorbis" style="width: 100%; height: auto;></video> )时，它就能工作了.那么，我的完整代码到底是怎么回事，而webm不起作用呢？

https://jsfiddle.net/2buqa04d/

HTML

<div class = "entry-body">
  <div class = "entry-title">
    <a href="http://i.imgur.com/91S22q6.webm">Title</a>
  </div>
  <div class= "entry-byline">
    by John Smith
  </div>
</div>

JS

$('.entry-body').each(function() {

var hplink = ($(this).find('.entry-title').find("a").prop('href'));

                        if (hplink.toLowerCase().match(/\.(webm)/g)) { 
                            
              
                            
            $(this).find('.entry-byline').after('<div class="beforeembed"></div><div class="hpembed hpembedMW"><video controls><source src="'+hplink+'" type="video/webm" codecs="vp8, vorbis" style="width: 100%; height: auto;></video></div>');

                        }
            
alert(hplink);

});

Answer 1

代码在结尾处缺少一个"。

$('.entry-body').each(function() {

var hplink = ($(this).find('.entry-title').find("a").prop('href'));

                        if (hplink.toLowerCase().match(/\.(webm)/g)) { 
                            
              
                            
            $(this).find('.entry-byline').after('<div class="beforeembed"></div><div class="hpembed hpembedMW"><video controls><source src="'+hplink+'" type="video/webm" codecs="vp8, vorbis" style="width: 100%; height: auto;"></video></div>');

                        }
            
alert(hplink);

});

“高度:自动；”之后