I'm developping an app with Ionic, and I have to display some video in playlist (I hoste them), so no Youtube player.
I use videoJS with plugin "videoJSPlaylist" : when a vdeo is finished, the next one play aotomatically, and I made "next" and "back" button to navigate in the playlist.
I had to remove the to make it work, otherwise it was not working. I have an issue on IOS where the back button is not working in the navbar. On the Chrome emulator and real android phone, the issue does not exist.
Maybe someone has a hint?
index.html :
...
<ion-side-menus>
<ion-pane ion-side-menu-content drag-content="main.dragContent">
<ion-nav-bar back-button-type="button-icon" back-button-icon="ion-ios7-arrow-back"animation="nav-title-slide-ios7">
<ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right-ios7"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left" is-enabled="isLeftMenuEnabled">
......
</ion-side-menu>
</ion-side-menus>
My html with video :
<ion-view title={{title}} hide-back-button="false" id="sequence">
<div class="wrapper">
<div class="videocontent">
<video id="video" class="video-js vjs-default-skin vjs-playing vjs-fullscreen" preload="auto" controls data-setup="{}" width="auto" height="auto"></video>
<button type="button" ng-click="prev()" class="controls-prev">Previous</button>
<button type="button" ng-click="next()" class="controls-next">Next</button>
</div>
</div>
</ion-view>
Related
I have an issue connected with playing video at IOS, I have a video tag created with React, like this.
<div className="video-component-wrapper" >
<video
id="video"
autoPlay
muted
loop
src="someSrc.mp4"
// type="video/mp4"
playsInline
preload="metadata"
>
Your browser does not support the video tag.
</video>
<div
className="sound-control-wrapper"
onClick={() => toggleMuted()}
>
<div>{isMuted ? "unmute" : "mute"}</div>
</div>
</div>
I am getting such a view on IOS
enter image description here
I am building cross platform application based on PhoneGap.
I am testing this app on iPad, I am using AngularJS.
I have created a list of media files using ng-repeat as below:
<div ng-repeat="media in mediaArray" style="width:200px; height:200px;">
<img ng-src="{{media.imgSrc}}"
ng-hide="media.isVideo"
style="width:200px; height:200px;"
>
<video id="video{{media.id}"
ng-show="media.isVideo"
postersrc="test.png"
poster-src <!-- Directive for poster source fix -->
controls
style="width:200px; height:200px;"
>
<source type="video/mp4"
videosrc="{{media.videoUrl}}"
video-src <!-- Directive for video source fix -->
>
Your browser does not support HTML5 video.
</video>
</div>
In my list I have images and video files.
I am able to see the list and also able to play the video files.
But problem is that, When I play any of the video then I am not able to scroll the list, scrolling works till I don't play any video once video is played scrolling does not work at all. what can be the issue?
Try this
<div ng-repeat="media in mediaArray" ng-controller="ScrollController" style="width:200px; height:200px;">
<img ng-src="{{media.imgSrc}}"
ng-hide="media.isVideo"
style="width:200px; height:200px;"
>
<video id="video{{media.id}"
ng-show="media.isVideo"
postersrc="test.png"
poster-src <!-- Directive for poster source fix -->
controls
style="width:200px; height:200px;"
>
<source type="video/mp4"
videosrc="{{media.videoUrl}}"
video-src <!-- Directive for video source fix -->
>
Your browser does not support HTML5 video.
</video>
</div>
Script for controller
angular.module('anchorScrollExample', [])
.controller('ScrollController', ['$scope', '$location', '$anchorScroll',
function ($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
}]);
I am developing a web app that displays animated schematics.
I have a feature that allows the user to switch between a 2D video of the schematic and a 3D video of the actual system. This works fine on Chrome, IE, and Firefox. It does not work on iOS on an iPad running 9.3.1. The two video are both controlled by the same custom video controls and play at the same time, the 2D video is in "front" (z-index=1) and the 3D is hidden behind it (z-index=0). When the 3D switch is hit it simply changes the 3D video to z-index=2. So nothing crazy going on here just a CSS trick. Also, it doesn't throw any errors when I inspect the console using my Mac.
This is my HTML for the page that plays the schematics:
<!-- Establishes the wrapper for all of the content and the angular controller that will control the content -->
<div id="player">
<video id="vid" onload="logDimensions()" ng-hide="twoDhidden" >
<source ng-src="{{selected.vidPath}}">
<track id="trk" ng-src="{{selected.track}}" kind="chapters" default> A browser with HTML5 text track support is required.
</video>
<video id="vid3D" ng-src="{{selected.vidPath3D}}" ng-hide="threeDhidden">
</video>
<span id="videoTime">{{currentTime | timeFilter}} / {{totalTime | timeFilter}}</span>
</div>
<div id="buttons">
<div id="videoOptions" class="fixed-action-btn vertical click-to-toggle">
<a class="btn-floating btn-touch blueIcon">
<i class="medium material-icons">more_vert</i>
</a>
<ul>
<li><a id="flankSpeed" class="btn-floating btn-touch" ng-class="flankClass"><i class="large material-icons ">fast_forward</i></a></li>
<li><a id="halfSpeed" class="btn-floating btn-touch" ng-class="halfClass"><i class="large material-icons ">slow_motion_video</i></a></li>
<li><a id="instructorBtn" title="Instructor" class="btn-floating btn-touch blueIcon"><i class="large material-icons ">supervisor_account</i></a></li>
</ul>
</div>
<div id="play" class="fixed-action-btn vertical click-to-toggle">
<a class="btn-floating btn-touch blueIcon">
<i title="Play" id="playIcon" class="material-icons">play_arrow</i>
<!-- <i id="pauseIcon" class="large material-icons hidden">pause_circle_filled</i> -->
</a>
<!-- <button id="instructorBtn" title="Instructor"> INSTR </button> -->
</div>
<div id="videoControls">
<svg id="draw_here" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line id="play_bar" x1="0%" y1="12" x2="100%" y2="12" /></line>
<div id="containment-wrapper">
<span id="dragMe"></span>
</div>
<div id="progress"></div>
</svg>
</div>
<div id="threeDSwitch" class="switch">
<label>
2D
<input id="threeDToggle" type="checkbox" class="default">
<span for="threeDToggle" ng-click="toggle3D()" class="lever"></span> 3D
</label>
</div>
</div>
I have searched for answers to this question but everything I find on iOS and HTML is from 2010-2013/4. Has anyone else run into this issue of playing two videos simultaneously? Is there a fix/workaround?
Short answer: iOS 10 added new capabilities that may be enough for you. And if not, it seems that true support for multiple simultaneous videos is coming soon.
In iOS 10, you can autoplay or call play() on a video without requiring user interaction, as long as it doesn't have sound. And starting the video no longer forces it into fullscreen playback:
https://webkit.org/blog/6784/new-video-policies-for-ios/
However you still can't play multiple videos simultaneously, but that patch just landed. So it's on the way:
https://bugs.webkit.org/show_bug.cgi?id=162366
Can you get your example working on iOS 10 by pausing one video when you start the other? You don't show them both at the same time, after all. You could keep them in sync by syncing up their currentTime properties each time the user switches.
Any idea why an HTML5 video would play on an iPhone 6s Plus but not an iPhone 5s? I'm getting a full page load on the 5s, including video poster and play button, but the button and video are unresponsive.
Here's the page: http://www.2labsnc.com/index.html
(for anyone using a desktop, the video is behind the large main photo).
Here's the code (a modified version of the Porto Theme by Okler):
<div role="main" class="main">
<div class="slider-container">
<div class="slider" id="revolutionSlider" data-plugin-revolution-slider data-plugin-options='{"startheight": 500}'>
<ul>
<li data-slotamount="7" data-masterspeed="1000" data-fstransition="fade" data-fsmasterspeed="1000" data-fsslotamount="7">
<img src="img/slides/BG-Slide.png" alt="dark" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" alt="Click to Play">
<div class="tp-caption tp-fade fadeout fullscreenvideo"
data-x="0"
data-y="0"
data-speed="1000"
data-start="100"
data-easing="Power4.easeOut"
data-elementdelay="0.01"
data-endelementdelay="0.1"
data-endspeed="1500"
data-endeasing="Power4.easeIn"
data-autoplay="false"
data-autoplayonlyfirsttime="false"
data-nextslideatend="true"
data-volume="2"
data-forceCover="1"
data-aspectratio="16:9"
data-forcerewind="on">
<video preload="none" controls="true" width="100%" height="100%" poster="img/slides/BG-Slide.png" loop video>
<source src="video/BG_intro_sound.mp4" type="video/mp4">
<source src="video/BG_intro_sound.ogv" type="video/ogg">
</video>
</div>
</li>
</ul>
</div>
</div>
....
Thanks for any help that you might be able to provide!
You can check in canuse http://caniuse.com/#feat=video if the browser you are using (or which version) support html5 video tag.
I'm trying to implement a jQuery-based image crop function that exports to base64 text. CropIt seems perfect for the job, and works beautifully, UNLESS it's not the first jQuery Mobile page in the list of jQm "pages", that displays by default in the HTML file. If it's not, everything works except for the zoom slider. I've created a jsFiddle to illustrate the problem:
http://jsfiddle.net/f97r3suf/5/
Any help getting the zoom slider to work would be appreciated, thanks! Code attached.
<!-- ********* DEFAULT JQUERY MOBILE PAGE **************** -->
<div data-role="page" id="splash" data-theme="f">
<div data-role="content">
<p>Here's a stripped-down example based on the sample CropIt code on GitHub. The long URL in the external resources list is a "locally" hosted version of Cropit.min.js on Google Drive. Everything else works, including the imageState tag, the drag-to-pan on the image, the image upload and export. Only the zoom slider doesn't work.</p>
Example: CropIt is the second jQm page
<p>If I switch the order of the jQuery Mobile pages, so that the Cropit page is the first (default) page of the HTML instead of this page, the zoom works fine: Example: Cropit is the first jQm page.</p>
</div>
</div>
<!-- ******** UPLOAD PAGE ******* -->
<div data-role="page" id="upload" data-close-btn="none">
<div data-role="content" style="padding:0px">
<!-- content -->
<div class="image-editor">
<input type="file" class="cropit-image-input">
<div class="cropit-image-preview"></div>
<div class="image-size-label">Resize image</div>
<input type="range" class="cropit-image-zoom-input">
<button class="export">Export</button>
</div>
</div>
</div>