Skip to content

videoUI 视频切换播放和全屏播放 微信小程序

Notifications You must be signed in to change notification settings

mrzhang90/videoUI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

videoUI

  • videoUI 视频切换播放和全屏播放 微信小程序

解决痛点:

  • video的src默认为空,解决了viode自动下载的bug

    • 加快页面加载速度,为用户节省流量
  • custom-cache="{{false}}"

    • 解决视频缓存中卡住的问题
<video id="wxParse{{item.index}}" src="{{srcs['wxParse'+item.index]}}" class="wxParse-video-video" poster="{{item.attr.cover}}" bindplay="bindplay_video" data-id="wxParse{{item.index}}" custom-cache="{{false}}">
	<cover-view class="controls" hidden="{{srcs['wxParse'+item.index]}}" bindtap="bindplay" data-id="wxParse{{item.index}}" data-src="{{item.attr.src}}">
	</cover-view>
</video>
  • 视频全屏播放

    • 解决iPhone X兼容问题
    • 视频全屏播放
  • 视频切换播放

     Object.keys(contextData).forEach(function (val, key) {
         if (id != val) {
           contextData[val].pause();
           that.setData({
             old_vid: id
           })
         }
     })
    • 自动暂停上一个视频

说明:

  • 我们贝壳亲子英语小程序,经过多版本迭代,优化了视频体验流程,这个项目是从实际项目抽离出的精华

  • 喜欢请start,您的支持就是我的动力…

  • 项目地址: https://github.com/mrzhang90/videoUI

About

videoUI 视频切换播放和全屏播放 微信小程序

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published