如何在html中显示视频答案

【问题标题】：How to display video in html如何在html中显示视频
【发布时间】：2017-01-18 23:31:23
【问题描述】：

我正在使用 angularJS，我正在尝试在我的列表中显示视频，为此我写了以下几行，但我无法获得链接：

<div ng-repeat ='video in vm.videos'>
   <video width="400" controls>
    <source ng-src="videos/{{video.video}}" type="video/mp4">
                        Your browser does not support this video.
   </video>
 <source src="videos/{{video.video}}" type="video/mp4">
</div>

当我将名称设为静态时，它会显示我的视频，有人可以提供帮助吗？

"videos": [
    {
      "_id": "587f5d31ceb2891e31422481",
      "title": "DSDAXAXASXASSX",
      "text": "<p>ASXASXASXASXASX</p>",
      "correlated_duione": "D008133",
      "correlated_duitwo": "ASXASXS",
      "video": "loading.-1484741937856.png,",
      "__v": 0
    }
  ],

【问题讨论】：

vm.videos 包含什么？
你的问题是视频地址/...
去sn-p和整理你的html
loading.-1484741937856.png, 似乎不像视频的名称文件。你确定src 属性是正确的吗？如果你使用src="videos/loading.-1484741937856.png,"，它会起作用吗？
如果我把它作为一个策略 src="videos/loading.-1484741937856.png 它可以工作，但像这样 src="videos/{{video.video}}" 不 wrkng。

标签： javascript angularjs html src

【解决方案1】：

您的代码有一个小的语法错误：

<div ng-repeat ='video in vm.videos>

你错过了结束报价。试试这个：

<div ng-repeat ="video in vm.videos">

除此之外，它看起来是正确的。如果它不起作用，请在浏览器中打开开发者控制台并查看是否记录了任何 HTTP 错误。您提供的videos/{{video.video}} 链接很可能已损坏。

【讨论】：

对不起，这是一个拼写错误，实际上我的问题是我无法看到显示的视频
@nlr_p vm.videos 的结构是什么？你能把它贴到你的问题上吗？（作为编辑）

【解决方案2】：

//In your MODULE add a filter (change "myModule" with the proper name )
myModule.filter('videoUrl', function($sce) {
    return function(video) {
        return $sce.trustAsResourceUrl(video.video);
    };
});

<!--In your view-->
<div ng-repeat ='video in vm.videos'>
    <video width="400" ng-src="{{ video | videoUrl }}" controls></video>
</div>

【讨论】：