AngularJS代码适用于Firefox，但不适用于Chrome
我得到了一个简单的代码，允许用户在输入框中输入youtube URL，并显示嵌入的视频。每次你输入一个新的url，它就会被列在下面的播放列表中。如果单击播放列表中的某个项目，视频将切换到新的url 你可以复制粘贴这段代码，它在Firefox上是开箱即用的，但是在Chrome上，点击播放列表不起作用 我不明白为什么，因为没有错误，而且我没有使用file://协议，所以这不是问题所在，我使用服务器：AngularJS代码适用于Firefox，但不适用于Chrome,angularjs,google-chrome,firefox,Angularjs,Google Chrome,Firefox,我得到了一个简单的代码，允许用户在输入框中输入youtube URL，并显示嵌入的视频。每次你输入一个新的url，它就会被列在下面的播放列表中。如果单击播放列表中的某个项目，视频将切换到新的url 你可以复制粘贴这段代码，它在Firefox上是开箱即用的，但是在Chrome上，点击播放列表不起作用 我不明白为什么，因为没有错误，而且我没有使用file://协议，所以这不是问题所在，我使用服务器： <!DOCTYPE html> <html ng-app='myApp'&
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="utf-8" />
<title>
Player simple
</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
function onYouTubePlayerReady(){
document.getElementById("ytplayer").playVideo();
};
angular.module('myApp', [])
.factory("playlist", function($sce){
var embedUrl = 'https://www.youtube.com/v/{{id}}?version=3&enablejsapi=1';
var service = {};
service.videos = [];
var currentVideo;
service.addVideo = function(videoUrl){
var res = /youtube\.com\/watch\?v=([^&]+)/.exec(videoUrl);
var url = embedUrl.replace("{{id}}", res[1]);
service.videos.push(url);
if (service.videos.length == 1){
service.currentVideo = $sce.trustAsResourceUrl(service.videos[0]);
}
};
service.playVideo = function(i){
console.log(i, service.videos[i])
service.currentVideo = $sce.trustAsResourceUrl(service.videos[i]);
}
return service;
})
.controller('Controlleur', function($scope, playlist) {
$scope.playlist = playlist;
});
</script>
</head>
<body ng-controller="Controlleur">
<div>
<object width="640" height="360" ng-show="playlist.currentVideo" >
<param name="movie" value="https://www.youtube.com/v/M7lc1UVf-VE?version=3"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed ng-src="{{playlist.currentVideo}}" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360" id="ytplayer"></embed>
</object>
</div>
<div>
<form ng-submit="playlist.addVideo(playlist.addedVideo)">
<p><input type="text" ng-model="playlist.addedVideo"><button>Add</button></p>
</form>
<ul>
<li ng-repeat="video in playlist.videos">
<a href="#" ng-click="playlist.playVideo($index)">{{video}}</a>
</li>
</ul>
</div>
</body>
</html>
</body>
</html>
我在MacOSX上的Chrome 46.0.2490.80 64位上运行良好 我使用python-msimplehttpserver来避免文件：//问题
多亏了@pasine link，我发现它确实是由以下原因引起的，并且可以通过创建一个指令来解决：
.directive('embedSrc', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var current = element;
scope.$watch(function() { return attrs.embedSrc; }, function () {
var clone = element
.clone()
.attr('src', attrs.embedSrc);
current.replaceWith(clone);
current = clone;
});
}
};
})
<embed embed-src="{{playlist.currentVideo}}" src="{{playlist.currentVideo}}" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360" id="ytplayer"></embed>
在FF和Chrome上进行了测试，并在两者上都有效。唯一的问题是当你添加两次相同的url时，但是你可以通过在你的ngRepeatVideo添加作品中添加一个$index的曲目来解决这个问题。播放列表开关不起作用。播放列表开关对你有用吗？我不知道你为什么会被否决。我知道单击播放列表项目不起作用，我测试了它，它不起作用。谢谢。要成为204k代表并在没有任何解释的情况下仍被否决是相当困难的。@KevinB因为这表明你花了很多时间来帮助社区，你至少应该得到2票来证明否决的合理性。这叫做礼貌。视频添加很有效。播放列表开关不起作用。播放列表开关是否适合您？