html中视频变圆角,圆形视频和圆角视频的一种实现方式
介紹
因?yàn)轫?xiàng)目的需要需要實(shí)現(xiàn)圓角視頻,一開始接到需求的時(shí)候是驚訝的,因?yàn)楹苌儆袌A角的視頻(主要是一開始沒有思路了。。。。。)
github 上已經(jīng)有一個(gè)實(shí)現(xiàn)了
videoroundedcorners
但是對于我的需要有些不滿足,不能了在上面添加view,因?yàn)樗O(shè)置了
setZOrderOnTop
所以才有了這邊文章
效果
屏幕快照 2018-04-12 下午5.38.26.png
屏幕快照 2018-04-12 下午5.38.35.png
好了效果就是這樣的,接下來是代碼了
實(shí)現(xiàn)部分
這里是采用MediaPlayer 和 Opengl 實(shí)現(xiàn)的
用到了Opengl的模板測試功能
@Override
public void onDrawFrame(GL10 gl) {
GLES20.glEnable(GLES20.GL_STENCIL_TEST);
GLES20.glClear(GLES20.GL_STENCIL_BUFFER_BIT);
GLES20.glStencilFunc(GLES20.GL_ALWAYS, 1, 0xff); // 總是通過
GLES20.glStencilOp(GLES20.GL_KEEP, GLES20.GL_KEEP, GLES20.GL_REPLACE);
if (currentShape == SHAPE_CIRCL) {
mCircleShape.draw();
} else {
mRoundShape.draw();
}
GLES20.glStencilFunc(GLES20.GL_EQUAL, 1, 0xff); // 只有模板緩沖區(qū)中的模板值為1的地方才被繪制
GLES20.glStencilOp(GLES20.GL_KEEP, GLES20.GL_KEEP, GLES20.GL_KEEP);
mVideoTextture.draw();
GLES20.glDisable(GLES20.GL_STENCIL_TEST);
}
先畫一個(gè)形狀然后再把視頻覆蓋到上面進(jìn)行裁剪實(shí)現(xiàn)還是不復(fù)雜的。
跟Canvas的PorterDuffXfermode實(shí)現(xiàn)圓形圖片有點(diǎn)異曲同工的意思。
有需要可以去看看代碼
如果對你有幫助就給他stars吧
代碼鏈接
總結(jié)
以上是生活随笔為你收集整理的html中视频变圆角,圆形视频和圆角视频的一种实现方式的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HTML5唐四薪,8文件存取组件课件.p
- 下一篇: 云大计算机专业录取分数线,2016年云南