For the WebView mode, Xiaomi Meizu phone does not support HTML5 native video control solution! Original

Source: Internet
Author: User

In fact, the solution is to re-write a control function,. The same use of popular video.js can be achieved, but I do not use Ah, to write their own ah ... PS: really cheap!

The first step is to add a picture to play. Otherwise, no buttons, no more ugly!

<Divclass= "Videodiv">    <VideoID= "Video"Poster=""preload= "metadata"width= "100%"Height= "100%"AutoPlay= "AutoPlay"X-webkit-airplay= "Allow"Webkit-playsinline>        <Sourcesrc= "http://125.88.92.166:30001/PLTV/88888956/224/3221227739/1.m3u8"type= ' Application/x-mpegurl '/>    </Video>    <imgclass= "Playimg"src= "Img/play.png"></Div>

The above video link is that that Henan TV live,, Idle can write a video to watch live, ha ha ha haha. ps:4 not 4 silly *.

This second step is naturally the control method pull. Actually very simple, will JS estimate will write, I proposed ...

$ (document). Ready (function(){    /*********** Judging Browser ua type **********************/    varn=navigator.userAgent.toLowerCase (); if(/iphone|ipad|ipod/. Test (n)) {        $(". Playimg"). Remove (); }    /************************** Video Control *********************************************/    functionFplayvideo () {$ (". Playimg"). Click (function(event) {varMyvideo = document.getElementsByTagName (' video ') [0]; if(myvideo.paused) {myvideo.play (); $(". Playimg"). CSS (' Display ', ' none ')); }            Else{myvideo.pause ();        }        }); $("Video"). Click (function(event) {varMyvideo = document.getElementsByTagName (' video ') [0]; if(myvideo.paused) {myvideo.play (); $(". Playimg"). CSS (' Display ', ' none ')); }            Else{myvideo.pause (); $(". Playimg"). CSS (' Display ', ' block ');        }        }); $("Video"). Bind ("ended",function(){            $(". Playimg"). CSS (' Display ', ' block ');    }); }    $(function() {fplayvideo (); });});

Cough and cough, it's so simple!

Wait, wait!...... The careful man found out again. You're fine. What do you mean, UA?!!!! Also only to determine the iOS ...

Don't worry, don't worry .... Listen to me slowly,....

action!

action!

On devices such as iOS, the parsing of video, even if you are not using the control property. He will also put a native play button in the middle of your screen, so I want to judge the device and remove the play button I added earlier .... Understand .... At this time, someone asked again. What about Android? In fact, when you do not add control properties, the above is nothing ... So Android doesn't have to think about pulling ... At this time, another person asked ... Cough cough ... That your own picture is not the same as the original iOS, is not, Android and iphone style look different ...

Cough cough. This question, for example,.,. is just like a dragon-Lung tire,... My daughter's going to look like her son.!!! haha haha joke ... PS: really he is cold ....

In fact, you can add a button yourself to go to Baidu, an identical to the iOS ... In fact, this is a chicken problem, the impact is not big ... It's all about a person's liking ....

Don't say much nonsense. This solution focuses on solving the webview mode, some of which do not support video,,, such as Xiaomi, Meizu. Why they do not support,,, I do not know, if you know, welcome message to inform ... Thank you, the Da ..... PS: Damn, you really don't want to face ... .........

This content is original, quote please indicate source, thank you. One more, huh?

For the WebView mode, Xiaomi Meizu phone does not support HTML5 native video control solution! Original

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.