Light

mrzhang90 / videoui Goto Github PK

View Code? Open in Web Editor NEW

57.0 4.0 13.0 525 KB

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

JavaScript 100.00%

videoui's Introduction

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

videoui's People

Contributors

Stargazers

Watchers

Forkers

andygoo 13861048971 axa303 jerroldlee c1178396429 jsonliao 18612792331 sydboys blue-skycat mrying copperdong 19980617 344672699

videoui's Issues

微信8.0 小程序开发工具预览失败 IOS手机端左滑卡死

1、全屏新页面打不开
2、IOS会出现左滑卡死的情况

解决方案：注释两行

onShow(){
    this.videoContext = wx.createVideoContext('myVideo')
    console.log(this.videoContext)
    // 全屏播放
    // this.videoContext.requestFullScreen()
    //iphone x下隐藏状态栏，仅对IPHONE X生效
    // this.videoContext.hideStatusBar();
  },

会出现新页面的返回按钮，然后点击返回按钮触发不了返回

初始加载首页海报图不显示

在苹果手机8P上，初始加载首页时，“视频切换播放”下面的两个视频的海报图不显示，播放按钮也不显示，可以正常点击播放

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.