AngularJS - 视频加载

AngularJS - Video Loading

本文关键字：加载 视频 AngularJS      更新时间：2023-09-26

我有一个模板，我可以通过JSON文件将详细信息加载到其中。加载的内容随嵌入的视频一起加载。JSON文件中的所有内容都运行良好，但是每个项目上都会出现相同的视频。有没有办法加载分配给每个 JSON 文件的单个视频？

这是模板： 

<div class="container" ng-repeat="guide in guides">
<div class="row">
<div class="col-md-12">
    <br/>
    <p><a ng-href="#/"><span class="glyphicon glyphicon-home"></span> Back to Guide List</a></p>
    <h1><span class="glyphicon glyphicon-play-circle"></span> Watch {{ guide.title }}</h1>
    <span>{{ guide.info }}</span><br/><br/>
</div>
<div class="col-md-12">    
    <video video="marvel">
    </video><!--This is the bit I'm having an issue with -->
</div>
<div class="col-md-6">
    <h3><span class="glyphicon glyphicon-education"></span> Background to {{ guide.title }}</h3>
    <span>{{ guide.background }}</span><br/><br/>
</div>
<div class="col-md-6">
    <h3><span class="glyphicon glyphicon-save"></span> Downloads for {{ guide.title }}</h3><br/>
                <a ng-href="{{ guide.pdf }}" target="_blank"><span class="glyphicon glyphicon-floppy-save"></span> Download Help Guide PDF</a><br/><br/>
                <a ng-href="{{ guide.video }}" target="_blank"><span class="glyphicon glyphicon-floppy-save"></span> Download Video</a>
    </div>
</div>
</div>

我无法将任何数据绑定到视频标签中（这是我构建的指令） - 所以有人有任何建议吗？

提前谢谢。

如果您在每次重复迭代中引用不同的视频，这应该会有所帮助;-）

<div class="col-md-12">    
    <video src="{{guide.my_video_uri}}">
    </video>
</div>

如果src=".."不起作用，请尝试ng-src=".."。

感谢您的建议。事实上，我已经尝试过这个 - 视频标签有点误导;因为它是称为"视频"的自定义指令。

<video video="{{ guide.video }}">
</video>

这只会带来错误：无法获取/%7B%7B%20videoUrl%20%7D%7D

该指令引入了 youtube 嵌入 - 我首先将其用于测试目的。目的是在之后将 trustAsResourceUrl 调整为另一种形式的嵌入。指令代码在下面（我已将标签从视频更改为视频播放器） 

guideApp.directive('videoPlayer', function ($sce) {
'use strict';
return {
    restrict: 'E',
    scope: { video: '=' },
    replace: true,
    template: '<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" width="100%" height="100%" src="{{ videoUrl }}" frameborder="0" allowfullscreen></iframe></div>',
    link: function (scope) {
        scope.$watch('videoPlayer', function (videoLink) {
            if (videoLink) {
                scope.videoUrl = $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + videoLink);
            }
        });
    }
};
});
相关文章：