javascript - 为什么视频不能在 html5 + angularjs + videogular 中播放

Question

我正在尝试在 angularjs + HTML5 中播放视频我没有收到任何错误但视频没有播放

这是我的代码 https://plnkr.co/edit/lESdtlAIr8mpGpdPemxE?p=preview

app.controller('MainCtrl', function($scope,$sce) {
  $scope.name = 'World';
  $scope.onPlayerReady = function(API) {
                controller.API = API;
            };
  $scope.config = {
            preload: "none",
                autoHide: false,
                autoHideTime: 3000,
                autoPlay: true,
                sources: [
                    {src: $sce.trustAsResourceUrl("https://www.radiantmediaplayer.com/media/bbb-360p.mp4"), type: "video/mp4"},
                ],

                theme: {
                    url: "https://unpkg.com/videogular@2.1.2/dist/themes/default/videogular.css"
                },
                plugins: {
                    poster: "http://www.videogular.com/assets/images/videogular.png"
                }
            };
            $scope.onCompleteVideo =function(){
              alert('---')
            }
});

<div ng-app="myApp">
    <div ng-controller="HomeCtrl" class="videogular-container">
        <videogular vg-theme="config.theme">
            <vg-media vg-src="config.sources">
            </vg-media>

            <vg-controls>
                <vg-play-pause-button></vg-play-pause-button>
                <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
                <vg-scrub-bar>
                    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                </vg-scrub-bar>
                <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
                <vg-volume>
                    <vg-mute-button></vg-mute-button>
                    <vg-volume-bar></vg-volume-bar>
                </vg-volume>
                <!--<vg-fullscreen-button></vg-fullscreen-button>-->
            </vg-controls>

            <vg-overlay-play></vg-overlay-play>
            <vg-poster vg-url='config.plugins.poster'></vg-poster>
        </videogular>
    </div>
</div>

我正在使用这个播放器 http://www.videogular.com/ 也从这个例子中得到帮助 https://codepen.io/2fdevs/pen/jHbat

<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script data-require="angular-sanitize@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videogular/1.4.4/videogular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videogular-controls@1.4.4/vg-controls.min.js"></script>

标签： javascriptangularjshtml