More

    H5视频代码 支持iPhone 带封面 兼容老IE HTML5Media

    网页上播放视频,这是很常见的需求,通常客户的要求是能播放,暂停,全屏,音量控制,进度控制。

    1 这些基本需求,用JW FLV player 3.12,这套播放器可以应对自如,满足大部分要求。

    2 后来客户有了新的要求,比如增加指定的视频封面图片,使用JW Player 6.0可以解决这个问题。不过网上很多JW Player6.0都不能用。

    由于iPhone不支持Flash Flv视频,所以以上视频都不能在iPhone上播放。

    3 要想让iPhone iPad播放的视频,需要HTML5格式的视频,可是老的IE浏览器不支持HTML5格式的视频,要想iPhone和老IE都支持的视频,有一个简易可控的播放器 html5media,网址:https://html5media.info/,一套文件都有用哦,如图

     

     

    使用方法

    1 嵌入一段js <script src=”js/html5media.min.js”></script>

    2 加载视频 <video class=”video”  src=”media/roy.mp4″ poster=”media/poster.jpg” width=”618″ height=”347″ controls preload></video>

    亲测有效,比如这个页面:http://www.worldlooker.com/about/

    在支持H5的PC浏览器中显示这个样子。

    在iPhone 6 Plus上看到的是这样子

    iphone-html5media

     

    官方下载地址

    GitHub:https://github.com/etianen/html5media

    (https://github.com/etianen/html5media/tree/master/dist/api/1.1.8)

    目前使用的是1.1.8版本

     

    achair
    achair
    achair的微信和QQ号都是 368537, WordPress教程公众号: WPvideo,更多请点击 关于achair

    发表回复

    请填写评论
    请填写您的名字

    -广告位-

    achair推荐

    我的MacBook Pro都装了这些软件 2019版

    用MacBookPro年头多了,如果想把MacOS X作为主力机(半商务、半技术用),软件关是必须得...

    阻止iPhone自动下载更新iOS13的tvOS beta描述文件不能用了怎么办...

    2020年2月13追加 最近收到一些小伙伴的反馈,说之前iOS12的描述文件失效了,不能用了。而且...

    推荐这种方式获得“苹果Mac软件”(叶子登录器)

    大家好,这次推荐和WordPress没有直接关系,有间接关系,估计很多同学用的是苹果的Mac电脑。 ...

    “全部WordPress课程”的学习顺序及如何优惠购买

    大家好,achair的《WordPress课程》,现在课程数量有点多,以后还会增加新课程和新课时,刚...

    从Themeforest购买正版WordPress主题(Avada, BeThe...

    大家好,在教程中经常出现Avada主题、BeTheme主题,这些主题是从哪来的?它们的官方购买地址是...

    推荐“SiteGround主机”作为“WordPress当前首选虚机”的15个理...

    大家好,用WordPress做网站,目前推荐使用SiteGround主机,现在是2019年12月。 ...