Html HTML5 视频不适用于 AngularJS ng-src 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15728424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video is not working with AngularJS ng-src tag
提问by qais
AngularJS ng-srcdoesn't work with HTML5 Video element in this fiddle: http://jsfiddle.net/FsHah/5/
AngularJSng-src不适用于此小提琴中的 HTML5 Video 元素：http: //jsfiddle.net/FsHah/5/
Looking at video element, the src tag is being populated with the correct src uri, but the video doesn't play.
查看视频元素，src 标签填充了正确的 src uri，但视频不播放。
Is this not supportedin AngularJS, what is the workaround for this?
这在AngularJS 中不支持，有什么解决方法吗？
回答by Sdd Sdei
Just Create a Filter:
只需创建一个过滤器：
app.filter("trustUrl", ['$sce', function ($sce) {
return function (recordingUrl) {
return $sce.trustAsResourceUrl(recordingUrl);
};
}]);
In View File:
在查看文件中：
<audio src="{{Your_URL | trustUrl}}" audioplayer controls></audio>
回答by dk123
This currently seems like a bug in AngularJS: https://github.com/angular/angular.js/issues/1352
目前这似乎是 AngularJS 中的一个错误：https: //github.com/angular/angular.js/issues/1352
Replacing source with <video ng-src="{{src}}" controls></video>seems to be the only way at the moment to at least load a source into the video. Hopefully someone comes around to either fix this or provide a workaround of some sort.
替换源<video ng-src="{{src}}" controls></video>似乎是目前至少将源加载到视频中的唯一方法。希望有人来解决这个问题或提供某种解决方法。
回答by kavinhuh
To play the video I just used the following method have a button called play and in the ng-click of the button you have to write this
要播放视频，我刚刚使用以下方法有一个名为 play 的按钮，在 ng-click 按钮中，您必须写下这个
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
to play video in ng-repeat use index. hope it helps.
要在 ng-repeat 中播放视频，请使用index。希望能帮助到你。
回答by saurabh yadav
Remove source tag from video tag and try this..
从视频标签中删除源标签并尝试这个..
<video controls preload=auto ng-src="{{videoURL| trustUrl}}" poster="{{thumbnailUrl}}"></video>
and in your angular app create a filter like this
并在您的角度应用程序中创建一个这样的过滤器
app.filter("trustUrl", function($sce) {
return function(Url) {
console.log(Url);
return $sce.trustAsResourceUrl(Url);
};
});
回答by Soubriquet
My response is a few years late, but this is for anyone who is still looking for a solution. I had the same issue. I remembered that Youtube displays their embedded videos using a different tag - iframe. I applied the properties I wanted and it worked.
我的回答晚了几年，但这适用于仍在寻找解决方案的任何人。我遇到过同样的问题。我记得 Youtube 使用不同的标签 - iframe 显示他们嵌入的视频。我应用了我想要的属性并且它起作用了。
<iframe width="560" height="300" ng-src="{{ video }}" frameborder="0" allowfullscreen controls></iframe>
<iframe width="560" height="300" ng-src="{{ video }}" frameborder="0" allowfullscreen controls></iframe>
For anyone new to AngularJS, the {{ video }} is a $scope.video variable in the control for this page that has the path to the video.
对于任何刚接触 AngularJS 的人来说，{{ video }} 是此页面控件中的 $scope.video 变量，它包含视频的路径。
回答by nesimtunc
This is a default security precaution in AngularJS. Please see the details: https://docs.angularjs.org/api/ng/service/$sce
这是 AngularJS 中的默认安全预防措施。详情请看：https: //docs.angularjs.org/api/ng/service/$sce
To disable the 'Strict Contextual Escaping' compeletly you can define this in your app.js file
要完全禁用“严格上下文转义”，您可以在 app.js 文件中定义它
angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
// Completely disable SCE. For demonstration purposes only!
// Do not use in new projects.
$sceProvider.enabled(false);
});
However they don't recommend. But you may use for a spesific controller like this:
但是他们不推荐。但是您可以使用这样的特定控制器：
var myAppControllers = angular.module('myAppControllers', []); ScorpAppControllers.controller('HomeCtrl', ['$scope', 'Home', function ($scope, Home) {
$scope.Home = Home.query(); }]).config(function($sceProvider) {
$sceProvider.enabled(false); });
回答by Dario Agliottone
workaround
解决方法
in controller
在控制器中
$scope.mp3 = "http://download.jw.org/audio.mp3"
$scope.$watch('mp3', function() {
$("audio").attr("src",$scope.mp3)
});
html:
html：
<audio id="mejs" type="audio/mp3" controls="controls"></audio>
回答by Seán Hayes
I think what's happening is Angular fills in the srcattributes after the and elements have been added to the page, so the browser sees the elements with broken URLs. I worked around it using ng-if:
我认为发生的事情是 Angularsrc在将 和 元素添加到页面后填充属性，因此浏览器会看到 URL 损坏的元素。我使用ng-if以下方法解决了它：
<video muted ng-if="foo" loop autoplay>
<source ng-src="{{foo.media.mp4.url}}">
<source ng-src="{{foo.media.webm.url}}" type="video/webm">
<img ng-src="{{foo.media.gif.url}}">
</video>
This makes the element tied to the existence of foo, which is a scope variable being populated via AJAX call.
这使得元素与 的存在相关联foo，这是一个通过 AJAX 调用填充的范围变量。
回答by Muhammad Reda
You can use ng-mediamodule.
您可以使用ng-media模块。
angular.module('app', ['media'])
.controller('mainCtrl', function($scope) {
$scope.videoSources = [];
$scope.loadVideos = function() {
$scope.videoSources.push('http://www.w3schools.com/html/mov_bbb.mp4');
$scope.videoSources.push('http://www.w3schools.com/html/mov_bbb.webm');
};
});<div ng-app='app'>
<div ng-controller='mainCtrl'>
<video html5-video='{{ videoSources }}'
autoplay='true' controls='true'>
</video>
<br>
<a href="#" ng-click='loadVideos()'>Load videos</a>
</div>
</div>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="http://caitp.github.io/ng-media/ng-media.js"></script>普朗克。
回答by Marc
Just use vanilla js (regular javascript) to make this work. If you are listening to events like onended you might want to reconsider using $scope.$apply().
只需使用 vanilla js（常规 javascript）来完成这项工作。如果您正在收听诸如 onended 之类的事件，您可能需要重新考虑使用 $scope.$apply()。
My example:
我的例子：
document.getElementById('video').src = $scope.videos[$scope.videoindex];
