个人中心
gpt4 book ai didi

angularjs - 单击选项卡菜单时如何在 ionic 框架中停止视频(html5 视频)

转载 作者：行者123 更新时间：2023-12-04 06:56:08 25 4
gpt4 key购买 nike

使用以下引用:

  • HTML5 Video Stop onClose
  • How to access $ionicModal object elements by id in ionic framework?

    • 单击其他选项卡时，我试图停止我的 ionic 应用程序中的视频。

    为了解决这个问题，我尝试了两种方法:

    1) 在 ionic.bundle.js 上面包含 jquery，如下所示: 
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> </script>

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    然后在我的 Controller 中我尝试了 $("#compass").pause();
    但这给出了错误:

    TypeError: $(...).pause is not a function



    我使用的另一种方法是:

    2) angular.element(document.getElementById("compass")).pause();
    但我收到此错误:

    TypeError: angular.element(...).pause is not a function



    我的视频html如下: 
    <ion-view>
        <div class="fullscreen-player" ng-click="closeModal()">
            <video id="compass" src="media/news_compass.mp4" width="100%" class="centerme" controls="controls" autoplay></video>
        </div>
    </ion-view>

    请帮忙!

    最佳答案

    您可以创建自己的 指令 控制视频，如下例所示。该示例在模式中有一个按钮，可以切换视频播放，但您可以使用自己的逻辑来停止或播放视频(将 control-play 属性设置为 false/true)。

    angular.module('ionicApp', ['ionic'])
     
    .controller('AppCtrl', function($scope, $window,$sce,$rootScope,$ionicModal){
        $scope.videoSource = $sce.trustAsResourceUrl("http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4");

        $scope.play = true;
        $scope.togglePlayer = function(e) {
          $scope.play = !$scope.play;
          console.log('togglePlayer: '+$scope.play);
        }

      $ionicModal.fromTemplateUrl('templates/modal.html', {
        scope: $scope,
        animation: 'slide-in-up'
      }).then(function(modal) {
        $scope.modal = modal;
      })

      $scope.openModal = function() {
        console.log("openModal");
        $scope.modal.show()
      }

      $scope.closeModal = function() {
        $scope.modal.hide();
      };

      $scope.$on('$destroy', function() {
        $scope.modal.remove();
      });

    })

    .directive('videoControl', function ($rootScope) {
        return function ($scope, $element, attrs) {
          
          attrs.$observe("controlPlay", function(value) {
            console.log('controlPlay: '+value);
            value = (value == 'false' ? false : true);
            if (value==false) {
              console.log('  > stop');
              $element[0].pause();
            } else {
              console.log('  > play');
              $element[0].play();
             }
          });
          
          $element[0].addEventListener("loadeddata", function () {
            console.log('loadeddata');
            $rootScope.$broadcast('videoEvent', { type: 'loadeddata' });
          });
          $element[0].addEventListener("playing", function () {
            console.log('playing');
            $rootScope.$broadcast('videoEvent', { type: 'playing' });
          });
          $element[0].addEventListener("ended", function () {
            console.log('ended');
            $rootScope.$broadcast('videoEvent', { type: 'ended' });
          });
          $element[0].addEventListener("pause", function () {
            console.log('pause');
            $rootScope.$broadcast('videoEvent', { type: 'pause' });
          });
          // and so on...
        }
    });
    .video{
      width: 100%;
      height: 80%;
      margin:0 auto;
    }
    <html ng-app="ionicApp">

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

      <title>Ionic Modal</title>

      <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
      <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    </head>

    <body ng-controller="AppCtrl">

      <ion-header-bar class="bar-positive">
        <h1 class="title">Modal example</h1>
        <div class="buttons">
          <button class="button button-icon ion-compose" ng-click="openModal()">
          </button>
        </div>
      </ion-header-bar>
      <ion-content>
        <ion-list>
            <ion-item>
              <button class="button button-positive button-primary" ng-click="openModal()">Open modal</button>
            </ion-item>
        </ion-list>
      </ion-content>

      <script id="templates/modal.html" type="text/ng-template">
        <ion-modal-view>
          <ion-header-bar class="bar bar-header bar-positive">
            <h1 class="title">Video modal</h1>
            <button class="button button-clear button-primary" ng-click="closeModal()">Cancel</button>
          </ion-header-bar>
          <ion-content>
            <div class="embed-responsive embed-responsive-16by9">
              <video id="video-player" class="video" video-control control-play="{{play}}" oncontextmenu="return false" autoplay="true" loop controls="controls" class="composition-video" ng-src="{{videoSource}}" type="video/mp4"></video>
            </div>
            <br>
            <button ng-click="togglePlayer($event)">Toggle play</button>
          </ion-content>
        </ion-modal-view>
      </script>

    </body>

    </html>


    这是一个 CodePen 链接: http://codepen.io/beaver71/pen/Veogrg/

    关于angularjs - 单击选项卡菜单时如何在 ionic 框架中停止视频(html5 视频)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35599485/

    25 4 0
    文章推荐： microsoft-graph-api - 设置 Microsoft Graph 的范围参数
    文章推荐： azure-storage-blobs - Azure IoT中心-保存遥测最佳实践
    文章推荐： PowerShell HashTable - 初始化期间的自引用
    文章推荐： r - 使用 geom_text 在 ggplot2 中的单个方面注释文本
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com