Question

嗨我有一个网址列表，其中一个是视频链接，我需要显示每个网址特定时间，每次30秒，我使用$ time out功能，除了播放视频，每个工作正常。

下面给出的控制器代码

.controller('PlaylistCtrl', ['$scope', '$stateParams','$ionicPopup','$http','$interval','$sce','$templateCache','$ionicHistory','$timeout','Base64','$ionicPlatform',function($scope, $stateParams,$ionicPopup,$http,$interval,$sce,$templateCache,$ionicHistory,$timeout,Base64,$ionicPlatform) {
    var sequencecount=[];
    sequencecount=0;
    var hostname='http://url.com/';
   var seqlist= JSON.parse(window.localStorage['slist'] || '{}');
    var time=[];
    //playvideo('test');
    playslide(sequencecount);
    function playslide(sequence){
        alert(sequence);
        var data=seqlist[sequence];
        var mediaurl=data['Url'];
        var url=hostname+data['Url']+'='+'?Date='+(new Date()).getTime();
        if(mediaurl.indexOf('media')==-1){
             playslideimage(url);
        }
         else{
             playvideo(url);
         }
        sequencecount++;
        $timeout(function() {
            var data=seqlist[sequencecount];
            time=data['time'];
            playslide(sequencecount);
            alert(time);
        }, time*1000);


    }
    function playslideimage(url){
     window.cache.clear( $scope.frameurl );
     window.cache.clear( $scope.videourl );
     $scope.vid=false;
     $scope.fram=true;
     $scope.videohight=0;
     $scope.iframeHeight = window.innerHeight;
     $scope.frameurl = $sce.trustAsResourceUrl(url);
    }
    function playvideo(url){
        window.cache.clear( $scope.frameurl );
     window.cache.clear( $scope.videourl );

     $scope.vid=true;
     $scope.fram=false;
     $scope.iframeHeight = 0;
     $scope.videohight=window.innerHeight;;
     $scope.videourl= $sce.trustAsResourceUrl('http://.mp4?autoplay');
        var video = document.getElementById('video');
        video.play();

    }



}])

这个id是html

<body>
    <div>
        <video id="video" autobuffer height="{{videohight}}" width="100%">
          <source src="{{videourl}}" type="video/mp4">
        </video>
    </div>
       <iframe id="myFrame" width="100%" data-ng-src="{{frameurl}}" height={{iframeHeight}}></iframe>
</body>

Answer 1

指令可用于此，如下所示，

  <Vid auto="true"/>
  <Vid auto="false"/>

  .directive("Vid",function(){
     return {
           restrict : 'E',
           scope :{
             auto :'@'
            }
           link:function(scope,ele,attrs) {
               var ele = angular.element(ele)[0];
              if(scope.auto)
                      ele.autoplay = true; // or ele.play();
              else 
                     ele.autoplay = false;
           }
       }
   })

Answer 2

要在HTML5中自动播放视频，请将autoplay添加到<video>标记。所以在你的情况下：

<video id="video" autobuffer height="{{videohight}}" width="100%" autoplay>

如何在angularjs中自动播放视频？

2 个答案: