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
Related
I have created a react component, within which I've embedded the HTML video tag. The video source is supplied from the local. The video works fine in windows, android, but not in iOS devices.
render() {
return (
<>
<div className={`${styles.slideItem}`}>
<video ref={this.props.videoElements[this.props.index]} id="video" playsInline className={`video ${styles.slideImage}`}>
<source src={this.props.videoHref} type="video/mp4"></source>
</video>
</div>
</>
)}
I've tried adding default attributes of video tag. Even the playsInline doesn't work as expected
I've tried adding the video URL directly to the code, but it doesn't work as expected.
What am I missing? Is this because of the video format?
Thanks in advance for any help!
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 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>