github地址:https://github.com/ireaderlab/zyMedia

使用说明

  1. 引入样式文件zy.media.css和js文件zy.media.js

  1. 输入html结构,例如视频,其中video标签的data-config属性用于设置参数,

<divclass="zy_media"><videoposter="test.jpg"data-config='{"mediaTitle": "《疯狂动物城》--腾讯视频"}'><sourcesrc="test.mp4"type="video/mp4">        您的浏览器不支持HTML5视频</video></div>
  1. 绑定媒体节点,zymedia是一个全局对象,可重复调用,不返回视频实例,需要的话建议直接获取视频和监听相应事件,第二个参数是用于批量设置视频参数,示例

zymedia('video');// zymedia('video', {...参数});
zymedia是做批量处理用的,单独设置用每个音视频上的data-config,每个音视频的src可随时替换(比如document.querySelector('video').src = 'test.mp4'),容器尺寸会保持不变

参数说明

  • type: ''
    指定媒体类型,默认空

  • mediaTitle: ''
    设置媒体标题,默认空,不展示

  • nativeControls: false
    强制用原生的播放控制器,默认不使用,true为使用

  • autoplay: false
    是否自动播放,默认否,true为自动播放

  • preload: 'none'
    是否预加载,默认关闭,和原生preload对应,其他值为metadata|auto|''

  • videoWidth: '100%'
    指定视频宽,默认100%

  • videoHeight: 'auto'
    指定视频高,默认auto

  • aspectRation: (16 / 9)
    指定视频宽高比,默认16:9

  • audioWidth: '100%'
    指定音频宽,默认100%

  • audioHeight: 44
    指定音频高,默认44px

  • autoLoop: false
    是否循环播放,默认否,true为无限循环

  • timeFormatType: 1
    时间格式类型,默认mm:ss,2为m:s

  • alwaysShowHours: false
    是否强制显示小时位,默认否,true为显示

  • alwaysShowControls: false
    是否始终显示控制栏,默认否,自动隐藏,true为始终显示

  • hideVideoControlsOnLoad: false
    加载时是否隐藏视频控制栏,默认否,true为隐藏

  • enableFullscreen: true
    是否显示全屏按钮,默认显示,false为不显示

  • pauseOtherPlayers: true
    是否播放唯一,默认唯一,播放时将暂停其他播放实例,false为不唯一

  • enableVisibilityState: true,
    是否页面不可见时暂停当前所有播放,默认暂停

  • duration: 0
    指定媒体时长,默认0

  • success: null
    实例化成功时的回调,默认无

  • error: null
    实例化错误时的回调,默认无

  • beforePlay: null
    点击播放前的交互,默认无,如果函数返回true,将不播放视频

视频插件—zy.media.js相关推荐

  1. 前端学习(974):视频插件zy.media.js的使用

    1引入js和css 2css部分 3,.js部分

  2. 移动端H5单视频播放插件zy.media.js

    zyMedia是一款基于HTML5原生multimedia.自定义UI的多媒体播放器. 地址

  3. 关于移动端插件扩展:lsuperslide和l iscroll以及zy.media.js视频插件

    ps:https://blog.csdn.net/guhong888/article/details/82765124(cadn的编辑方法) 1.lsuperslide 网址: http://www. ...

  4. Web APIs:移动端网页特效--移动端常用开发插件(fastclick,swiper及zy.media.js)

    fastclick插件的使用 前面说的俩种解决click延迟,第一种禁用放大缩小,这肯定不太行,第二种还要写这么多代码,而且一次只能给一个用户设置,很麻烦.而使用插件. fastclick 插件就可以 ...

  5. mpvue 如何使用腾讯视频插件?

    1.在小程序微信开放平台:设置 - 第三方服务里申请腾讯视频插件 2.申请成功后就可以在项目中使用了 具体使用步骤如下: 1.在项目目录src下的main.js中加入下面代码,这里代码会被编译到app ...

  6. Vue的video-player的视频无法加载出来,vue视频插件;显示叉号; The media could not be Loaded,

    1.安装vue视频插件 解:百度一下,有很多教程,我这里不多说 2.问题:视频资源资源显示"X"号 1.首先你写好的要用视频的那块 <!-- HTML部分 -->< ...

  7. jquery.media.js 插件实现在线预览PDF文件

    代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...

  8. 婚礼邀请函小程序 使用腾讯视频插件

    婚礼邀请函小程序 使用腾讯视频插件 1.项目展示 2.腾讯视频插件 3.上代码 首页 照片墙页面 美好时光页面 婚礼地点页面 结语 1.项目展示 2.腾讯视频插件 小程序中提供了腾讯视频插件来播放视频 ...

  9. 手机腾讯视频android版插件,小程序1.6.5版更新,终于支持腾讯视频插件了

    微慕小程序1.6.5版更新说明如下: 新增的功能 1.调整海报功能(adapter.js ,detail.js) 考虑到以前的海报生成有些变形,也容易导致失败,此次更新对海报的程序做了较大的调整,并做 ...

最新文章

  1. 烂泥:虚拟化KVM安装与配置
  2. python ConfigParser 小试
  3. 2篇CIKM详解阿里妈妈搜索广告CTR模型如何低碳瘦身
  4. jzoj4015-数列【循环节,数论】
  5. Instant Complexity--POJ 1472
  6. 互联网产品之百万级高并发技术整体架构
  7. 互联网的大厂就那么几家,所以很多员工跳槽后都是互相流动的
  8. Pikachu实验重现2(Sql的注入)
  9. UBUNTU14.0.4安装eclipse
  10. WIN7系统开启无线路由共享上网功能
  11. my games / BF3 / GTA5 / NFS18 / sanguowushuang6 / RA2 / KOF97 / FIFA
  12. 盲盒识别装置-2022TI杯10月联赛D题
  13. USB数据采集卡,通过树莓派微型电脑,实现高速以太网数据采集
  14. IT职场人生系列之二十四:程序员如何增加收入
  15. 单片机小白学步系列(八) 用面包板搭建实验电路
  16. cad lisp 二次抛物线_用Cad画二次抛物线
  17. Linux下删除特殊字符的文件或文件夹
  18. 2021年最火的前端框架
  19. FastICA算法类有哪些最新发表的毕业论文呢?
  20. Python基础------几种循环结构详解

热门文章

  1. Moom Mac版使用教程:如何通过键盘触发基于鼠标的调整大小网格?
  2. An End-to-End Neural Network for Image Cropping by Learning Composition from Aesthetic Photos
  3. STM32F767 SDRAM DCMI LTDC野火开发板
  4. AE教程:纸张飘动动画
  5. 求整数 1~100之间含有7或者7的倍数的数一共有多少?分别是什么?
  6. 关于呵榀(pin)的意思
  7. 基于新形态下变电站智慧消防管理体系构建研究
  8. 测试开发真的不难(5)如何让IDEA实时显示内存
  9. 拉青电站调速器用比例阀实验出现问题
  10. 美国计算机硕士预科学校,美国硕士预科申请