• video 播放


    视频播放是个坑。。。

    HTML5 Video API https://www.w3.org/2010/05/video/mediaevents.html

    虽然界面很丑,但是事件、属性很全。

    进行视频操作前务必查阅。

    很多属性事件在手机端无法获取。。。

    具体可参考:http://www.xuanfengge.com/html5-video-play.html

    (之后补全可获取的属性事件)

    ios与安卓 均支持以下属性:

    video.ended

    video.currentTime

    一、ios端控制视频播放

    <video src=" " id="video"  x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
    ></video>
    1.目前只有ios7+、winphone8+支持自动播放
    2.支持Airplay的设备(如:音箱、Apple TV)播放
      x-webkit-airplay="true" 
    3.播放视频不全屏,ios7、、winphone8+支持,部分android4+支持(含华为、小米、魅族)
      webkit-playsinline="true" 
    4.ios 10 : playsinline
    5.ios 8、9 :https://github.com/bfred-it/iphone-inline-video


    二、安卓端控制视频播放 

    安卓上的微信调用X5浏览器内核,视频样式无法自定义。。。

    X5浏览器内核遇到的问题具体可参考以下链接:

    https://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/

     x5-video-player-type

    启用同层播放。取值固定为'h5'

    x5-video-player-fullscreen

    是否全屏。取值为'true''false'

    1.安卓上只有在 WeixinJSBridgeReady 这个事件下才能使视频自动播放!!!

    例:

    document.addEventListener("WeixinJSBridgeReady", function () {
    
    $("#video").play();
    
    });

    2.安卓上只有用户进行点击等触发事件才能播放视频,不可以在点击事件后设置 setimeout 控制视频多少秒后进行播放,不然会出现video的播放按钮(安卓下的默认样式),仍需用户点击才能播放。

    3.video的层级默认最高,如需在video上添加封面等高于video层级的图层,需要将video的宽高设为0,播放视频时需要重新设置video的宽高。

    $('#video').width(0).height(0);
    $('#video').width(640).height(1040).get(0).play();

     

  • 相关阅读:
    原型设计
    案例分析
    编程作业
    《构建之法》阅读任务
    2021.3.11 准备工作随笔
    课程总结
    第十四周课程总结&实验报告(简单记事本的实现)
    第十三周课程总结
    第十二周
    第十一周课程总结
  • 原文地址:https://www.cnblogs.com/echolife/p/6141608.html
Copyright © 2020-2023  润新知