javascript - AngularJS 如何点击拇指并出现视频？

这是我的代码

<div class="container">
            <!-- THE YOUTUBE PLAYER -->
            <div class="vid-container">
                <iframe id="vid_frame" ng-src="{{selectedVideo.url}}" frameborder="0" width="560" height="315"></iframe>
            </div>


            <!-- THE PLAYLIST -->
            <div class="vid-list-container">
                <div class="vid-list">

                    <div ng-repeat="video in youTubeVideos">
                        <div class="vid-item" ng-click="selectedVideo.url = video.url">
                            <div class="thumb"><img ng-src="//img.youtube.com/vi/{{video.img}}/0.jpg"></div>
                            <div class="desc">{{video.desc}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

$scope.youTubeVideos = [
                {
                    url: '//youtube.com/embed/eg6kNoJmzkY?autoplay=1&rel=0&showinfo=0&autohide=1',
                    img: 'eg6kNoJmzkY',
                    desc: 'Jessica Hernandez & the Deltas - Dead Brains'
                },
                {
                    url: '//youtube.com/embed/_Tz7KROhuAw?autoplay=1&rel=0&showinfo=0&autohide=1',
                    img: '_Tz7KROhuAw',
                    desc: 'Barbatuques - CD Tum P&aacute; - Sambalel&ecirc;'
                },
            ];

            $scope.selectedVideo = {};

控制台出现错误: 错误:[$interpolate:interr] 无法插值:{{selectedVideo.url}} 错误:[$sce:insecurl] 阻止从 $sceDelegate 策略不允许的 URL 加载资源。网址:https://youtube.com/embed/eg6kNoJmzkY

我无法解决此错误，我还需要在 vid-container 中保留视频 #1

最佳答案

您的资源请求被 AngularJS 中的 $sceDelegateProvider 阻止。

The $sceDelegateProvider allows one to get/set the whitelists and blacklists used to ensure that the URLs used for sourcing AngularJS templates and other script-running URLs are safe

将 URL 添加到 $sceDelegateProvider 白名单中，您应该能够抓取视频

angular.module('myApp', []).config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        'https://youtube.com/embed/**'
    ]);
});

<小时/>

如何更改所选视频？

var app = angular.module('myApp', []);
app.controller('videoCntrl', ['$scope', '$http', function ($scope, $http) {

    $scope.changeVideo = function (video) {
        $scope.selectedVideo = $scope.videos[video];
    }

    $scope.videos = [{
        url: '//youtube.com/embed/eg6kNoJmzkY?autoplay=1&rel=0&showinfo=0&autohide=1',
        img: 'eg6kNoJmzkY',
        desc: 'Jessica Hernandez & the Deltas - Dead Brains'
    },
    {
        url: '//youtube.com/embed/_Tz7KROhuAw?autoplay=1&rel=0&showinfo=0&autohide=1',
        img: '_Tz7KROhuAw',
        desc: 'Barbatuques - CD Tum P&aacute; - Sambalel&ecirc;'
    }];

}]);

将 ng-click 属性添加到所需的触发器。像这样的东西:

<div ng-click="changeVideo(1)"></div>

最后，在 body 标记上添加 ng-controller 属性。

<body ng-controller="videoCntrl">

关于javascript - AngularJS 如何点击拇指并出现视频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50845805/

javascript - AngularJS 如何点击拇指并出现视频？

上一篇：javascript - 将函数插入数组，将 let 转换为 var

下一篇：javascript - .fillStyle 不起作用，我的代码有问题吗？或者 Canvas 的 .fillStyle 的任何替代品？