Question

我有一个简单的代码，允许用户在输入框中输入youtube网址，并显示嵌入视频。每当您输入新网址时，它都会列在下面的播放列表中。如果单击播放列表中的项目，视频将切换到新URL。

您可以复制粘贴此代码，它在Firefox上开箱即用，但在Chrome中，点击播放列表不起作用。

我无法理解为什么没有错误（我没有使用file：//协议，所以这不是问题，我使用服务器）：

<!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>

Answer 1

在MacOSX上的Chrome 46.0.2490.80（64位）上可以正常使用。

我使用<?php $expdate="2020-09-13 21:00:00"; $exp_date = new DateTime($expdate); print $exp_date->format('d M. Y H:i:s'); ?>来避免python -m SimpleHTTPServer问题。

https://imgur.com/Omra8Wy

Answer 2

感谢@pasine链接，我发现它确实是由this bug引起的，可以通过创建指令来解决：

.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>

AngularJS代码适用于Firefox但不适用于Chrome

2 个答案: