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