Question

我已经病倒了，因为无法通过数据库提供的网址嵌入YouTube视频。

我通过

将youtube列入白名单

app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        'https://www.youtube.com/**'
    ]);
})

然后在控制器中我从服务器（数据库）获取视频数据并使用$sce设置要被欺骗的URL

app.controller('videosCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {

    $scope.video = null;
    $scope.video_url = null;

    $http.get('/side/video').success(function(data) {
        if(data.length > 0) {
            $scope.video = data[0];
            $scope.video_url = $sce.trustAsResourceUrl(data[0].url);
        }   
    });

}]);

然后我通过（jade）

渲染iframe

iframe(ng-src="{{video_url2}}",width="100%",height="300",frameborder="0",allowfullscreen)

结果在chrome dev控制台中我得到了

Refused to display 'https://www.youtube.com/watch?v=WN66EpVdxsk' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

其他我应该怎么做才能说服角度可以从youtube渲染视频？！

解决方案：我发现/watch拒绝播放来自不同来源的视频，但www.youtube.com/embed/允许，所以我只是从第一个网址中提取视频ID并将其添加到第二个。

Answer 1

对我而言似乎是一个CORS问题，而不是一个Angular问题，如果我没有弄错，但我不确定如何修复它。检查这些问题是否存在类似问题

从服务器通过URL呈现YouTube视频

1 个答案: