Canvas Support

Video not loading on Iphone or Ipad

6 replies · opened Nov 13, 2016

IivanpossNov 13, 2016

Hello-

re: www.achieva.us

Video plays fine now on PC and android mobile. I have been trying to get the video to play on IPad and IPhone but cannot. Does not play on either Chrome or Safari. I tried adding controls to my code (see below), tried ogv file (now commented out), tried adding an .htaccess file to directory, and also ran the file through Handbrake to optimize. Nothing works. 

    <div class="video-wrap">     
       <video poster="http://www.achieva.us/images/Captoss.png"  preload="auto" loop autoplay controls="true" muted>
                          
                  <source src="http://www.achieva.us/videos/CaptossA.mp4" type="video/mp4" /> 
                  <source src="http://www.achieva.us/videos/Captoss.webm" type="video/webm" /> 
                          
              <!--<source src="http://www.achieva.us/videos/Captoss.ogv" type="video/ogg" />-->
                          
	</video>
          
        <div class="video-overlay" style="background-color: rgba(0,0,0,0.45);"></div>
</div>

I understand autoload not working but shouldn't there at least be controls for playing-

any solutions?

IivanpossNov 13, 2016

Also forgot to mention- The poster image itself is not being responsive and scaling down to tablet or ipad size.

Thanks for your help.

SSemicolon WebSTAFFNov 14, 2016

Hello,

  1. Apple and Android do not allow autoplay for HTML5 Videos/Audio to prevent unsolicited usage of Bandwidth (which can be Cellular) on the User’s Mobile Device. They can only be played on their native Video Player.

Here is the Official Reference for Apple: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html .

We are definitely keeping an eye on the Latest Updates by Apple and Android to allow the auto-playing of HTML5 Videos on their respective phones and as soon as they release an Update we will surely make this available. The HTML5 Videos on Mobile Devices do not work on any Website.

Additionally, for User Experience the best practice for this is to use the Video Placeholder Images and not show the Video Play Button which is the case with most the Websites since the Video Plays inside a Different UI (Default Device Player) and leaves the Website Screen. However, if you would like to disable the Video Overlay, you can simply add the Bootstrap Responsive Classes: http://getbootstrap.com/css/#responsive-utilities to the .video-overlay Element to hide it on Mobile Devices.

  1. Recently, iOS 10 Devices have received support for playing HTML5 Videos. Please consider following the Steps below to make it work:

a. Add the playsinline Attribute to the <video> Tag. Example: 


    ...

b. Then add the .no-placeholder Class to the .video-wrap Container that encloses the <video> Tag. Example: 


    
        ...

c. Please find the following code in the js/functions.js File: 

if( SEMICOLON.isMobile.any() ) {
    var placeholderImg = elementVideo.attr('poster');

    if( placeholderImg != '' ) {
        element.append('')
    }
}

and replace it with: 

if( SEMICOLON.isMobile.any() && !element.hasClass('no-placeholder') ) {
    var placeholderImg = elementVideo.attr('poster');

    if( placeholderImg != '' ) {
        element.append('')
    }
}

This will definitely work fine.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

IivanpossNov 14, 2016

Yes- thank you for info- I had discovered some of that on my own through google....

But, I have also been told that the "poster" image is not displaying properly on Iphone and when I check on my cell (android) it looks like I get about a 1/3 of the picture (the right side 1/3). So is it not being responsive and scaling the image properly? When I check on an Ipad mini I get the following: in portrait mode about a 1/3 image. In landscape mode about a full image.

Anything to make it adjust based on screen size?

And lastly- shouldn't I be getting a video on android phone? Right now I am getting poster image.

SSemicolon WebSTAFFNov 15, 2016

Hello,

We Really Apologize about the inconveniences caused regarding this. We have just encountered a Bug regarding the Positioning of the Placeholder Image for the Video on Mobile Devices. To fix this issue, please find the following code in the css/style.css File: 

.mobile-parallax,
.video-placeholder {
	background-size: cover !important;
	background-attachment: scroll !important;
	background-position: center center;
}

and replace it with: 

.mobile-parallax,
.video-placeholder {
	background-size: cover !important;
	background-attachment: scroll !important;
	background-position: center center !important;
}

This will fix this issue.

However, currently the content is not shown or hidden based on the OS of the Mobile Devices. All Touch Devices are treated the same way.

Hope this Helps! Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

IivanpossNov 15, 2016

Thank you- BUT I have changed my Style.css file and uploaded it to my site and there is no change.

Here is the code I used as per your instructions:

.mobile-parallax,
.video-placeholder {
background-size: cover !important;
background-attachment: scroll !important;
background-position: center center !important;
}

SSemicolon WebSTAFFNov 18, 2016

Hello,

We have just checked out your Website and the Video appears to be working on the iOS Devices now. This is because you have added the .no-placeholder Functionality as stated in the above replies.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard