zoukankan      html  css  js  c++  java
  • 视频 zy.meida.js 插件

    1)下载地址

    https://github.com/ireaderlab/zyMedia

    二 基本使用

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

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

    <div class="zy_media">
    <video poster="test.jpg" data-config='{"mediaTitle": "《疯狂动物城》--腾讯视频"}'>
    <source src="test.mp4" type="video/mp4">
    您的浏览器不支持HTML5视频
    </video>
    </div>

    3)绑定媒体节点,zymedia是一个全局对象,可重复调用,不返回视频实例,需要的话建议直接获取视频和监听相应事件,第二个参数是用于批量设置视频参数,示例

    zymedia('video');
    // zymedia('video', {...参数});

    4)

    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,将不播放视频


  • 相关阅读:
    剑指 Offer——13. 调整数组顺序使奇数位于偶数前面
    剑指 Offer——3. 从尾到头打印链表
    剑指 Offer——2. 替换空格
    剑指 Offer——1. 二维数组中的查找
    LeetCode 905. Sort Array By Parity 按奇偶校验排列数组
    LeetCode 448. Find All Numbers Disappeared in an Array找到所有数组中消失的元素
    SSH 代码笔记
    anaconda3安装caffe
    opencv多版本安装
    人脸文章与数据库
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14479629.html
Copyright © 2011-2022 走看看