123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
- <link rel="stylesheet" href="../style/weui.css"/>
- <link rel="stylesheet" href="../style/weui2.css"/>
- <link rel="stylesheet" href="../style/weui3.css"/>
- <script src="../zepto.min.js"></script>
- <link rel="stylesheet" href="../video.css"/>
- <script src="../video.js"></script>
- </head>
- <body ontouchstart class="page-bg">
- <div class="page-hd">
- <h1 class="page-hd-title">
- 音频,视频,插件播放方式
- </h1>
- <p class="page-hd-desc">ios和微信客户端内自动播放音频需采用Jsdk,其余都不能自动;视频播放需加载video.css和video.js</p>
- </div>
- <div class="zy_media">
- <video poster="http://7xr193.com1.z0.glb.clouddn.com/test.jpg" data-config='{"mediaTitle": "《疯狂动物城》--来自Yoby七牛视频"}' webkit-playsinline>
- <source src="http://7xr193.com1.z0.glb.clouddn.com/test.mp4" type="video/mp4" >
- 您的浏览器不支持HTML5视频
- </video>
- </div>
- <div class="weui_cells_title">页面播放</div>
- <div class="zy_media">
- <audio data-config='' src="http://7xr193.com1.z0.glb.clouddn.com/test.mp3" preload="meta" id='audio'>
- 您的浏览器不支持HTML5音频
- </audio>
- </div>
- <div class="weui_cells_title">音频播放方式四,需加载vedio.js</div>
- <script>
- function audioplay(id){
- var audio = document.getElementById(id);
- !audio.paused?audio.pause():audio.play();
-
- document.addEventListener("WeixinJSBridgeReady", function () {
- !audio.paused?audio.pause():audio.play();
- }, false);
- }
-
- $(function(){
- zymedia('video',{});
- zymedia('audio',{autoplay:true,preload:'metadata'});
- audioplay('audio');
- })
-
- </script>
-
- <pre>
- 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为不唯一
- duration: 0
- 指定媒体时长,默认0
- success: null
- 实例化成功时的回调,默认无
- error: null
- 实例化错误时的回调,默认无
- </pre>
-
- </div>
- </body>
- </html>
|