联系我们 - 广告服务
您的当前位置:主页 > 布局 > 开发 >

video

来源:未知 编辑:admin 时间:2018-01-19
导读: 小程序中允许我们简单嵌入视频,和audio组件相比,它能提供的属性少了很多,只能设置视频源,监听加载错误,这样几乎不能对video组件做什么操作。video/默认宽度为300px,高度为225px,属性如下:src:要播放视频的资源地址。controls:是否显示默认播放控件
小程序中允许我们简单嵌入视频,和audio组件相比,它能提供的属性少了很多,只能设置视频源,监听加载错误,这样几乎不能对video组件做什么操作。<video/>默认宽度为300px,高度为225px,属性如下:·src:要播放视频的资源地址。·controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间),默认为true。·danmu-list:弹幕列表。·danmu-btn:是否显示弹幕按钮,只在初始化时有效,不能动态变更,默认为false。
·enable-danmu:是否展示弹幕,只在初始化时有效,不能动态变更,默认为false。·autoplay:是否自动播放,默认为false。·bindplay:当开始/继续播放时触发play事件。·bindpuase:当暂停播放时触发pause事件。·bindended:当播放到末尾时触发ended事件。·bindtimeupdate:播放进度变化时触发,event.detail={currentTime:'当前播放时间'}。触发频率应该在250ms一次。·objectFit:当视频大小与video容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖,默认值为contain如图所示。

 代码如下:
<view class="video">   <video id="myVideo" src="{{src}}" 
danmu-list="{{danmu}}" enable-danmu  controls></video>   <view class="action">   <button bindtap="getVideo">获取视频</button>   <view class="danmu">     <input type="text" value="{{danmuText}}" bindblur="setInputValue"/>     <button bindtap="sendDanmu">发送弹幕</button>   </view>   </view> </view> .video video { width : 100%;height : 562.5rpx; } .video .action { padding : 20rpx; } .video .action .danmu { margin-top: 10px; position: relative; padding-right :210rpx; height : 80rpx;
 .video .action .danmu input { border : solid 1px #ccc; height : 80rpx; padding :  0 10rpx; border-radius: 3px;} .video .action .danmu button { width : 200rpx; position: absolute; right : 0;  bottom : 0; height : 80rpx; } Page( {   data : {     src : 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',     //设置弹幕     danmu : [{
 text : '第1s出现的弹幕',         color : '#ff0000',         time : 1       }, {         text : '第2s出现的弹幕',         color : '#00ff00',         time : 2       }     ],     danmuText : ''   },   onReady : function() {   //获取videon上下文videoContext对象     this.videoContext = wx.createVideoContext( 'myVideo' );   },   getVideo : function() {     var self = this;     //从本地或相机选择视频     wx.chooseVideo( {       success : function( res ) {
self.setData( {           maxDuration : 60,           src : res.tempFilePath         } );       }     } );   },   setInputValue : function( e ) {     // 同步数据     this.setData( {       danmuText : e.detail.value     } );   },   //发送弹幕   sendDanmu : function() {     var danmuText = this.data.danmuText;     console.log( this.videoContext );     this.videoContext.sendDanmu( {       text : danmuText,       color : '#ff0000'
} );     // 发送弹幕后清空输入框     this.setData( {       danmuText : ''     } );   } } );
 需要注意的是<video/>组件不能在<scroll-view/>中使用。

责任编辑:admin

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

上一篇:audio
下一篇:地图组件

网友评论:

在“\templets\demo\comments.htm”原来的内容全部删除,插入第三方评论代码,如果不需要评论功能,删除comments.html里面的内容即可
推荐使用友言、多说、畅言(需备案后使用)等社会化评论插件

Copyright © Tricks资讯网 版权所有
本站所有资讯来源于网络 如有侵权请联系QQ:940910888 技术支持鹏博科技
Top