如何自动播放视频angularjs？ [英] How to autoplay video in angularjs?

问题描述

您好，我有一个URL列表是视频链接我需要显示每个URL特定每30秒我使用$超时功能，每一件事情是工作的罚款，除了播放视频这样的时间。

在code低于

给出的控制器

  .controller（'PlaylistCtrl'，['$范围'， '$stateParams','$ionicPopup','$http','$interval','$sce','$templateCache','$ionicHistory','$timeout','Base64','$ionicPlatform',function($scope, $stateParams,$ionicPopup,$http,$interval,$sce,$templateCache,$ionicHistory,$timeout,Base64,$ionicPlatform) {
    变种sequencecount = [];
    sequencecount = 0;
    VAR主机名=HTTP：//url.com/';
   VAR seqlist = JSON.parse（window.localStorage ['SLIST'] ||'{}'）;
    无功时间= [];
    //调用playVideo（'测试'）;
    playslide（sequencecount）;
    功能playslide（序列）{
        警报（序列）;
        VAR数据= seqlist [序列]
        VAR mediaurl =数据['URL'];
        VAR URL =主机+数据['地址'] +'='+'？日期='+（新的Date（））的getTime（）。
        如果（mediaurl.indexOf（'媒体'）==  -  1）{
             playslideimage（URL）;
        }
         其他{
             的playVideo（URL）;
         }
        sequencecount ++;
        $超时（函数（）{
            VAR数据= seqlist [sequencecount]
            时间=数据['时间'];
            playslide（sequencecount）;
            警报（时间）;
        }，时间* 1000）;
    }
    功能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）;
    }
    函数调用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自动播放？'）;
        VAR视频=的document.getElementById（'视频'）;
        video.play（）;    }}]）
 

此标识的HTML

 ＆LT;身体GT;
    ＆LT; D​​IV＆GT;
        ＆lt;视频ID =视频自动缓冲高度={{videohight}}WIDTH =100％＆GT;
          ＆lt;信源SRC ={{videourl}}TYPE =视频/ MP4＆GT;
        ＆LT; /视频＆GT;
    ＆LT; / DIV＆GT;
       ＆所述; iframe中的id =myFrame宽度=100％的数据-NG-SRC ={{frameurl}}高度= {{iframeHeight}}＆GT;＆下; / iframe的＆GT;
＆LT; /身体GT;
 

解决方案

指令可以用于这个如下，

 ＆LT;西元自动=真正的/＆GT;
  ＆LT;西元自动=FALSE/＆GT;  .directive（Vid的功能（）{
     返回{
           限制：'E'，
           范围 ：{
             汽车：'@'
            }
           链接：功能（范围，ELE，ATTRS）{
               变种ELE = angular.element（ELE）[0];
              如果（scope.auto）
                      ele.autoplay = TRUE; //或ele.play（）;
              其他
                     ele.autoplay = FALSE;
           }
       }
   }）
 

hi i have a list of urls in that one is video link i need to display each url for particular time each for 30 seconds i doing this using $time out function every thing is working fine except playing video.

the code for the controller given below

.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();

    }



}])

this id the 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>

解决方案

Directive can be used for this as below ,

  <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;
           }
       }
   })

这篇关于如何自动播放视频angularjs？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！