代码之家 › 专栏 › 技术社区 › N Sharma

无法使用HTML的视频标记在页面上显示视频

angular5 angular html

N Sharma · 技术社区 · 6 年前

我正在构建一个AngularJS项目,在这个项目中我调用了一个API,该API向我提供了YouTube视频的URL列表。我需要在我的页面上显示这些视频,这样如果我单击播放按钮,我的视频就可以开始了。

我已获取URL,正在尝试使用 *ngFor 迭代我得到的数组。我的HTML代码在下面

   <tr *ngFor="let fetchApi of fetchApi.data.featured">
        <td ></td>
        <td> {{fetchApi.id | json}} </td>
       <td> {{fetchApi.video_id| json}} </td>
       <td><video src="{{fetchApi.video_location}}" controls></video></td>
   </tr>

但是我从第二个TD获取了URL,但是视频标签不起作用。只显示播放按钮,而不是视频。

如果我做错了,你能纠正我吗?

2 回复 | 直到 6 年前

Sajeetharan 6 年前

尝试

<video width="800" [src] = "fetchApi?.video_location" controls>
    Your browser does not support HTML5 video.
</video>

编辑

您需要将URL清理为,

 this.safeSrc =  this.sanitizer.bypassSecurityTrustResourceUrl("https://www.youtube.com/embed/c9F5kMUfFKk");

以及相应的模板,

<iframe [class.thumbnail]="thumbnail" [src]="safeSrc" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen
      allowfullscreen></iframe>

DEMO

顺便说一句,谢谢你给我这个有挑战性的任务:p

Komal K. 6 年前

<video ng-src="{{fetchApi.video_location}}" controls></video>

你试过用ng-src代替src吗?

推荐文章

Vimal · 用于用户名验证的JavaScript正则表达式

6 年前

user2024080 · 我如何防止我的表单在以后编辑?

6 年前

DiPix · 如何在Visual Studio中将Angular 5应用程序添加到解决方案中?

6 年前

Karl Johan Vallner · 如何将datatable寻呼机模板添加到Angular ngx datatable

6 年前

Ali Bedaer · 具有多个组件的角形5

6 年前

user8707389 · Angular 5侦听器或用于按钮禁用属性更改的指令

6 年前

3gwebtrain · 如何单独更新'BehaviorSubject'单个值

6 年前

Neto · 角度5-使用RouterUseStrategy时如何重新加载当前数据

6 年前

Lakshan Thilakarathne · Firebase 5 Angular 5 AngularFireList。snapshotChanges()错误

6 年前

Robby · 角度5构建生成main。以MB为单位进行捆绑,这会在生产中造成性能问题

6 年前