angularjs – 当与onsen UI一起使用时,视频控制器不起作用
发布时间:2020-12-17 17:25:50 所属栏目:安全 来源:网络整理
导读:我正在尝试使用OnSen UI( https://onsen.io)和Videogular( http://www.videogular.com/)制作视频播放器应用程序.当我一起使用视频控制器的视频控制器不起作用.以下是我的代码. link rel="stylesheet" href="lib/onsen/css/onsenui.css"link rel="stylesheet"
我正在尝试使用OnSen UI(
https://onsen.io)和Videogular(
http://www.videogular.com/)制作视频播放器应用程序.当我一起使用视频控制器的视频控制器不起作用.以下是我的代码.
<link rel="stylesheet" href="lib/onsen/css/onsenui.css"> <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"> <link rel="stylesheet" href="list_with_header.css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="lib/onsen/js/angular/angular.js"></script> <script src="lib/onsen/js/onsenui.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.min.js"></script> <script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script> <script src="http://static.videogular.com/scripts/controls/latest/vg-controls.js"></script> <script src="http://static.videogular.com/scripts/overlay-play/latest/vg-overlay-play.js"></script> <script src="http://static.videogular.com/scripts/poster/latest/vg-poster.js"></script> <script src="http://static.videogular.com/scripts/buffering/latest/vg-buffering.js"></script> <script> ons.bootstrap(); </script> <style type="text/css"> html,body { margin: 0; padding: 0; } .playlist ul { list-style-type: none; } .playlist ul a { cursor: pointer; color: #428bca; text-decoration: none; } .playlist ul a:visited { color: #428bca; } .playlist ul a:hover { color: #428bca; text-decoration: underline; } .videogular-container { width: 100%; height: 320px; margin: auto; overflow: hidden; } .videogular-container .skipButton { position: absolute; padding: 10px; top: 10px; right: 10px; z-index: 99999; color: white; cursor: pointer; background-color: #666666; border: 2px #FFFFFF solid; display: none; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } @media (min-width: 1200px) { .videogular-container { width: 1170px; height: 658.125px; } .videogular-container.audio { width: 1170px; height: 50px; } } @media (min-width: 992px) and (max-width: 1199px) { .videogular-container { width: 940px; height: 528.75px; } .videogular-container.audio { width: 940px; height: 50px; } } @media (min-width: 768px) and (max-width: 991px) { .videogular-container { width: 728px; height: 409.5px; } .videogular-container.audio { width: 728px; height: 50px; } } </style> <script> 'use strict'; angular.module('DemoAppVideo',[ "ngSanitize","com.2fdevs.videogular","com.2fdevs.videogular.plugins.controls","com.2fdevs.videogular.plugins.overlayplay","com.2fdevs.videogular.plugins.poster","com.2fdevs.videogular.plugins.buffering" ] ) .controller('HomeCtrl',["$sce","$timeout",function ($sce,$timeout) { var controller = this; controller.state = null; controller.API = null; controller.currentVideo = 0; controller.onPlayerReady = function(API) { controller.API = API; }; controller.onCompleteVideo = function() { controller.isCompleted = true; controller.currentVideo++; if (controller.currentVideo >= controller.videos.length) controller.currentVideo = 0; controller.setVideo(controller.currentVideo); }; controller.videos = [ { sources: [ {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"),type: "video/mp4"},{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"),type: "video/webm"},{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"),type: "video/ogg"} ] },{ sources: [ {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov"),{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_stereo.ogg"),type: "video/ogg"} ] } ]; controller.config = { preload: "none",autoHide: false,autoHideTime: 3000,autoPlay: false,sources: controller.videos[0].sources,theme: { url: "http://www.videogular.com/styles/themes/default/latest/videogular.css" },plugins: { poster: "http://www.videogular.com/assets/images/videogular.png" } }; controller.setVideo = function(index) { controller.API.stop(); controller.currentVideo = index; controller.config.sources = controller.videos[index].sources; $timeout(controller.API.play.bind(controller.API),100); }; }] ); </script> <ons-tabbar> <ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab> <ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab> <ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab> <ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab> </ons-tabbar> <ons-template id="home.html"> <ons-page> <ons-toolbar> <div class="left" style="line-height: 44px"> <ons-back-button>Back</ons-back-button> </div> <div class="center">Artists</div> <div class="right" style="line-height: 44px"> Right </div> </ons-toolbar> <div ng-app="DemoAppVideo"> <div ng-controller="HomeCtrl as controller"> <div class="videogular-container"> <videogular vg-player-ready="controller.onPlayerReady($API)" vg-complete="controller.onCompleteVideo()" vg-theme="controller.config.theme.url"> <vg-media vg-src="controller.config.sources" vg-tracks="controller.config.tracks"> </vg-media> <vg-controls> <vg-play-pause-button></vg-play-pause-button> <vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</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':'+0000' }}</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-buffering></vg-buffering> <vg-poster vg-url='controller.config.plugins.poster'></vg-poster> </videogular> </div> <div class="playlist"> <ul> <li><a ng-click="controller.setVideo(0)">Pale Blue Dot</a></li> <li><a ng-click="controller.setVideo(1)">Big Buck Bunny</a></li> </ul> </div> </div> </div> </ons-page> </ons-template> 我收到错误代码. 解决方法
您正在使用ons.bootstrap加载AngularJS两次,然后使用angular.module(‘DemoAppVideo’,[])加载AngularJS,因此它可能不会采用第二部分.阅读ons.bootstrap函数
here.
基本上,你可以用Angular方式(记得添加’onsen’): <script> // Assume 'ng-app' is defined as 'my-app' var module = angular.module('my-app',['onsen','ngAnimate']); module.controller('AppController',function($scope) { }); </script> 或者您可以使用ons.bootstrap代替: <script> // No need to define 'ng-app' var module = ons.bootstrap(['ngAnimate']); module.controller("AppController",function($scope){ }); </script> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |