为什么这个 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'));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (hplink.toLowerCase().match(/\.(webm)/g)) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(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>');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;alert(hplink);});在“高度：自动；”之后