检查 <video> 标签是不是可以显示媒体并处理 Angular 中的错误

Posted

技术标签:

【中文标题】检查 <video> 标签是不是可以显示媒体并处理 Angular 中的错误【英文标题】:Checking if <video> tag can display a media and handling an error in Angular检查 <video> 标签是否可以显示媒体并处理 Angular 中的错误 【发布时间】:2017-04-16 10:54:43 【问题描述】:

我的目标是检查 html5 视频元素是否可以显示来自给定 src 的视频。我使用 Angular 构建我的应用程序。下面是我的 html 组件的模板和控制器的外观。

传递给组件控制器的每个模型都有自己的路径和名称。当路径指向有效的 mp4/webm/ogg 文件时 - 它会完美显示。但我想检查是否支持来自给定路径的文件。如果出现错误,我会向用户显示一个对话框,上面写着vm.name + 'cannot be displayed'

有很多来自 w3 的 HTML 音频/视频 DOM 参考方法,但我根本不知道如何使用它们。此外,我注意到我不能在组件的模板 html 文件中使用内联 js。

http://www.w3schools.com/tags/ref_av_dom.asp

所以?如何检查文件是否可以在视频标签中显示?

video-preview.html

<header class="dialog-header">
    <span>vm.name</span>
    <button type="button" class="btn btn-icon close-btn icon-close" ng-click="vm.closeDialog()"></button>
</header>
<div class="dialog-content">
    <video class="video-preview-dialog" id="myVideo" autoplay src="vm.path" controls></video>
</div>

video-preview-dialog.controller.js

(function () 
'use strict';
 angular
    .module('videoApp')
    .controller('VideoPreviewDialogController', VideoPreviewDialogController);

  /** @ngInject */
  function VideoPreviewDialogController(model, VideoDialogInstance) 
    var vm = this;
    vm.path = model.path;
    vm.name = model.name;
    vm.closeDialog = closeDialog;

    function closeDialog() 
      PreviewDialogInstance.cancel();
    

  
)();

【问题讨论】:

【参考方案1】:

答案是将带有“&”符号的函数从控制器传递给指令,并在发生错误时调用它。 1. 指令中的链接标签 2.设置为播放器eventListener("error",passedFunction())

原来如此

【讨论】:

以上是关于检查 <video> 标签是不是可以显示媒体并处理 Angular 中的错误的主要内容,如果未能解决你的问题,请参考以下文章

如何使用本机播放器而不是网络播放器播放 <video> 标签的视频?

如何将 YouTube 视频添加为 <video> 而不是嵌入的 <iframe>?

如何使用 Spring MVC 返回视频,以便可以使用 html5 <video> 标签进行导航?

使用 <video> 标签的介绍视频

video 在移动端浏览器变现的层级太高,总是在最高层,如何解决;

关于HTML的<video>标签控件