大佬教程收集整理的这篇文章主要介绍了angularjs – 单击选项卡菜单时如何在离子框架中停止视频(html5视频),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
> HTML5 Video Stop onClose
> How to access $ionicModal object elements by id in ionic framework?
当点击其他选项卡时,我正试图在我的离子应用程序中停止我的视频.
为了管理这个,我尝试了两种方法:
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>
然后在我的控制器中我尝试了$(“#compass”).pause();
但这会给出错误:
我使用的另一种方法是:
2)angular.element(document.getElementById(“compass”)).pause();
但我得到这个错误:
我的视频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>
请帮忙!
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 – 单击选项卡菜单时如何在离子框架中停止视频(html5视频)全部内容,希望文章能够帮你解决angularjs – 单击选项卡菜单时如何在离子框架中停止视频(html5视频)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。