Fix h5 video tag, Android, ipad client playback is normal, iphone client cannot play

Source: Internet
Author: User

After inserting a video playback tag in the HTML5, the Android and ipad clients play normally when the test is done, except that the iphone comes with a browser that does not play.

Workaround:

When the user uses the client to access the H5 page when it is the iphone, clicking the play video triggers a link to a video URL rather than a visual tag.

The JS judgment code is as follows: This code references github in stanko/html-canvas-video-player

 var  isiphone = navigator.userAgent.indexOf (' iPhone ') >= 0; //  other, detect IOS  //  var Isios =/ipad|iphone|ipod/.test (navigator.platform);  if   (Isiphone) {  Init Canvasvideoplayer here  new   Canvasvideoplayer ({ //  Options  Span style= "color: #000000;" >    });} else   {  use HTML5 Video } 

Based on the above Isiphone judgment code can solve such problems

ENG: (The HTML code is no longer posted)

$(function(){        varIsiphone = navigator.userAgent.indexOf (' iPhone ') >= 0; if(Isiphone) {$ (". Play_video"). Click (function() {window.location= "Absolute address URL of the video"            }); }        Else {            $(". Play_video"). Click (function(){                                varvideohtml = "<video id=\" video_span\ "class=\" url_video\ "src=\" video absolute address url\ "x-webkit-airplay=\" true\ " Webkit-playsinline=\ "true\" poster=\ "the absolute address of the video cover picture \" Preload=\ "null\" loop=\ "loop\" AutoPlay controls=\ "Controls\" ></video> "                $("#video_div"). HTML (videohtml) $ (". section"). AddClass ("masked").); $(". Video"). Show (); });        }    });

Fix h5 video tag, Android, ipad client playback is normal, iphone client cannot play

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.