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.
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.
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>
So I have some videos that I post to my blog - Be aware, it's kid pictures, and will probably put in in a child induced coma quickly.
I would like to display the HTTP Live streaming version of the video for those on iOS & Macs, but the standard MP4 file for everyone else. So, it would be great to have logic to provide anyone with Safari the m3u8, and everyone else the mp4. Thanks!
As it stands now, I have to provide 2 different players (which looks bad)
<!-- Begin Video.js Responsive Wrapper -->
<div style='max-width:800px;'>
<div class='video-wrapper' style='padding-bottom:45.875%;'>
<!-- Begin Video.js -->
<video id="example_video_id_2142731582" class="video-js vjs-default-skin" width="800" height="367" poster="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/poster.png" controls preload="none" data-setup="{}">
<source src="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/1stBikeRide.m3u8" type='video/mp4' />
</video>
<!-- End Video.js -->
</div>
</div>
<!-- End Video.js Responsive Wrapper -->
</p>
<!-- Begin Video.js Responsive Wrapper -->
<div style='max-width:800px;'>
<div class='video-wrapper' style='padding-bottom:45.875%;'>
<!-- Begin Video.js -->
<video id="example_video_id_621346600" class="video-js vjs-default-skin" width="800" height="367" poster="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/poster.png" controls preload="none" data-setup="{}">
<source src="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/First%20Bike%20Ride-Wi-Fi%20High.mp4" type='video/mp4' />
</video>
<!-- End Video.js -->
</div>
</div>
<!-- End Video.js Responsive Wrapper -->
</p>
You can add multiple <source> elements, and the browser will go through the list until it finds a source element that it supports:
<video id="example_video_id_621346600" class="video-js vjs-default-skin" width="800" height="367" poster="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/poster.png" controls preload="none" data-setup="{}">
<source src="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/First%20Bike%20Ride-Wi-Fi%20High.m3u8" type='application/x-mpegURL' />
<source src="http://blog.thetroutmans.net/wp-content/uploads/2013/04/1stBikeRide/First%20Bike%20Ride-Wi-Fi%20High.mp4" type='video/mp4' />
</video>
Here's a random blog post I stumbled across awhile ago and bookmarked that talks about this a bit more.