视屏未缓冲进度条实现拖动

1 篇文章 0 订阅
1 篇文章 0 订阅
目前,大部分视屏网站都使用FLV格式来播放视屏。大家需要观看还尚未传过来的部分,只需把进度条拖曳到指定时间点就可以观看了。

首先,大部分的视屏格式需要转换成FLV格式。
Flash 8 Video Encoder支持转换的视频格式相当广泛,如:AVI、WMV、MPEG、ASF、MOV等常见视频格式。

然后,需要把时间点的Meta信息写入到FLV文件中去。
我们可以使用FLV工具如FLVTool2来实现。

用户在Flash视屏播放器中把进度条拖到未缓冲过的点,这时,浏览器重新请求视屏,把时段的参数(Offset)传过去,视频服务器获取到时段Offset,从该Offset后开始传输视屏的字节。

服务器应用软件如Nginx等,一般需要开发插件来支持对Offset后的字节请求,而不让服务器从第一个字节开始传输。

例如youku的视屏请求如下:
[color=blue]http://f.youku.com/player/getFlvPath/sid/133656024654615467406_01/st/mp4/fileid/03000803014F97C9616EBA04A74EC1A038B676-85FA-61BB-DF68-A61A8CD34A72?start=44&K=3688609132f26fea2410fec8&hd=1&myp=0&ts=233[/color]

[color=blue]http://119.147.157.139/youku/657463988DB3081C242EC65805/03000803014F97C9616EBA04A74EC1A038B676-85FA-61BB-DF68-A61A8CD34A72.mp4?start=44[/color]

涉及到的名词:
[b]--Flv(flash) Streaming
--Pseudostreaming
--Flv未缓冲视频拖动[/b]

参考:http://archive.cnblogs.com/a/2017703/
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
效果图1: 效果图2: 实现思路: 1、播放视频的view选择TextureView 2、ListView下方盖上自定义ViewDragHelper,当在播放视频时,通过自定义ViewDragHelper进行拖动TextureView 3、进行渐变处理,让两个view的文字能够交替显示 4、当TextureView到达右下方时,控制在水平方向上拖动,到达左边界时,如果再滑动,就销毁TextureView 代码分析: 关于ViewDragHelper要注意如下几点: ViewDragHelper.Callback是连接ViewDragHelper与view之间的桥梁(这个view一般是指拥子view的容器即parentView); ViewDragHelper的实例是通过静态工厂方法创建的;你能够指定拖动的方向; ViewDragHelper可以检测到是否触及到边缘; ViewDragHelper并不是直接作用于要被拖动的View,而是使其控制的视图容器中的子View可以被拖动,如果要指定某个子view的行为,需要在Callback中想办法; ViewDragHelper的本质其实是分析onInterceptTouchEvent和onTouchEvent的MotionEvent参数,然后根据分析的结果去改变一个容器中被拖动子View的位置( 通过offsetTopAndBottom(int offset)和offsetLeftAndRight(int offset)方法 ),他能在触摸的时候判断当前拖动的是哪个子View; 虽然ViewDragHelper的实例方法 ViewDragHelper create(ViewGroup forParent, Callback cb) 可以指定一个被ViewDragHelper处理拖动事件的对象,但ViewDragHelper类的设计决定了其适用于被包含在一个自定义ViewGroup之中,而不是对任意一个布局上的视图容器使用ViewDragHelper。 1.自定义的CustomViewDragHelper的初始化 ViewDragHelper一般用在一个自定义ViewGroup的内部,比如下面自定义了一个直接继承于ViewGroup的类DragvideoView,DragvideoView内部有一个mDragHelper作为成员变量: // DragVideoView.java public DragVideoView(Context context) { this(context, null); } public DragVideoView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public DragVideoView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } private void init() { mDragHelper = CustomViewDragHelper.create(this, 1f, new MyHelperCallback()); setBackgroundColor(Color.TRANSPARENT); } 创建一个带有回调接口的ViewDragHelper,这里是用MyHelperCallback,这些都是一些基本使用方法 拖动行为的处理已在注释中给出 // DragVideoView.java private class MyHelperCallback extends CustomViewDragHelper.Callback { //继承CustomViewDragHelper的Callback @Override public boolean tryCaptureView(View child, int pointerId) {//当前view是否允许拖动 return child == mPlayer; //如果是显示视频区域的view } @Override public void onViewDragStateChanged(int state) { //当ViewDragHelper状态发生变化时回调(IDLE,DRAGGING,SETTING[自动滚动时]) if (state == CustomViewDragHelper.STATE_IDLE) { if (mIsMinimum && mDragDirect == HORIZONTAL && mDisappearDirect != SLIDE_RESTORE_ORIGINAL) { if (mCallback != null && mCallback.get() != null) mCallback.get().onDisappear(mDisappearDirect);//水平方向上拖拽消失回调 mDisappearDirect = SLIDE_RESTORE_ORIGINAL; restorePosition(); requestLayoutLightly(); } mDragDirect = NONE; } } @Override public int getViewVerticalDragRange(View child) { //垂直方向拖动的最大距离 int range = 0; if (child == mPlayer && mDragDirect == VERTICAL) { range = mVerticalRange; } Log.d(TAG, ">> getViewVerticalDragRange-range:" + range); return range; } @Override public int getViewHorizontalDragRange(View child) { //横向拖动的最大距离 int range = 0; if (child == mPlayer && mIsMinimum && mDragDirect == HORIZONTAL) { range = mHorizontalRange; } Log.d(TAG, ">> getViewHorizontalDragRange-range:"+range); return range; } @Override public int clampViewPositionVertical(View child, int top, int dy) {//该方法中对child移动的边界进行控制,left , top 分别为即将移动到的位置 int newTop = mTop; Log.d(TAG, ">> clampViewPositionVertical:" + top + "," + dy); if (child == mPlayer && mDragDirect == VERTICAL) { int topBound = mMinTop; int bottomBound = topBound + mVerticalRange; newTop = Math.min(Math.max(top, topBound), bottomBound); } Log.d(TAG, ">> clampViewPositionVertical:newTop-"+newTop); return newTop; } @Override public int clampViewPositionHorizontal(View child, int left, int dx) { //返回横向坐标左右边界值 int newLeft = mLeft; Log.d(TAG, ">> clampViewPositionHorizontal:" + left + "," + dx); if (child == mPlayer && mIsMinimum && mDragDirect == HORIZONTAL) { int leftBound = -mPlayer.getWidth(); int rightBound = leftBound + mHorizontalRange; newLeft = Math.min(Math.max(left, leftBound), rightBound); } Log.d(TAG, ">> clampViewPositionHorizontal:newLeft-"+newLeft+",mLeft-"+mLeft); return newLeft; } @Override public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) { //view在拖动过程坐标发生变化时会调用此方法,包括两个时间段:手动拖动和自动滚动 Log.d(TAG, ">> onViewPositionChanged:" + "mDragDirect-" + mDragDirect + ",left-" + left + ",top-" + top + ",mLeft-" + mLeft); Log.d(TAG, ">> onViewPositionChanged-mPlayer:left-"+mPlayer.getLeft()+",top-"+mPlayer.getTop()); if (mDragDirect == VERTICAL) { //垂直方向 mTop = top; mVerticalOffset = (float) (mTop - mMinTop) / mVerticalRange; } else if (mIsMinimum && mDragDirect == HORIZONTAL) { // 水平方向 mLeft = left; mHorizontalOffset = Math.abs((float) (mLeft + mPlayerMinWidth) / mHorizontalRange); } requestLayoutLightly(); } @Override public void onViewReleased(View releasedChild, float xvel, float yvel) {// if (mDragDirect == VERTICAL) { //如果拖拽的方向是在垂直方向上 if (yvel > 0 || (yvel == 0 && mVerticalOffset >= 0.5f)) minimize(); else if (yvel < 0 || (yvel == 0 && mVerticalOffset < 0.5f)) maximize(); } else if (mIsMinimum && mDragDirect == HORIZONTAL) { //如果已经最小化窗口,并且是在水平方向上 if ((mHorizontalOffset < LEFT_DRAG_DISAPPEAR_OFFSET && xvel < 0)) slideToLeft(); //向左滑动 else if ((mHorizontalOffset > RIGHT_DRAG_DISAPPEAR_OFFSET && xvel > 0)) slideToRight();// 向右滑动 else slideToOriginalPosition();//原地不动 } } } 当在MainActivity调用ViewDragHelper的setCallback方法时,以上回调就能作用了。当点击节目列表页(第一个显示listview的界面)的item时,调用playVideo()方法,方面内部通过DragVideoView.show方法,就开始显示DragVideoView。这时视频开始播放起来,并且,我们也可以对其进行拖拽了。 // MainActivity.java private void playVideo() { mDragVideoView.show(); if (mMediaPlayer.isPlaying()) return; try { mMediaPlayer.prepare(); } catch (Exception e) { e.printStackTrace(); } mMediaPlayer.start(); } 那么在拖动的过程中,我们要在DragVideoView中重写onTouchEvent方法,如下 // DragVideoView.java @Override public boolean onTouchEvent(MotionEvent event) { boolean isHit = mDragHelper.isViewUnder(mPlayer, (int) event.getX(), (int) event.getY()); if (isHit) { switch (MotionEventCompat.getActionMasked(event)) { case MotionEvent.ACTION_DOWN: { mDownX = (int) event.getX(); mDownY = (int) event.getY(); } break; case MotionEvent.ACTION_MOVE: if (mDragDirect == NONE) { int dx = Math.abs(mDownX - (int) event.getX());//上一次getX()时和在MOVE过程中getX()的差值 int dy = Math.abs(mDownY - (int) event.getY());//上一次getY()时和在MOVE过程中getY()的差值 int slop = mDragHelper.getTouchSlop();//用户拖动的最小距离 if (Math.sqrt(dx * dx + dy * dy) >= slop) {//判断是水平方向拖拽,还是垂直方向上拖拽 if (dy >= dx) mDragDirect = VERTICAL; else mDragDirect = HORIZONTAL; } } break; case MotionEvent.ACTION_UP: { if (mDragDirect == NONE) { int dx = Math.abs(mDownX - (int) event.getX()); int dy = Math.abs(mDownY - (int) event.getY()); int slop = mDragHelper.getTouchSlop(); if (Math.sqrt(dx * dx + dy * dy) < slop) { mDragDirect = VERTICAL; if (mIsMinimum) maximize(); else minimize(); } } } break; default: break; } } mDragHelper.processTouchEvent(event); return isHit; } 以上方法最后,我们调用了,mDragHelper.processTouchEvent(event);也就是我们自定义的CustomViewDragHelper类,这个方法没有改动,就是ViewDragHelper的processTouchEvent方法。(篇幅原因,建议可以看下源码) 总结下这个方法 在processTouchEvent中对ACTIONDOWN、ACTIONMOVE和ACTION_UP事件进行了处理: 1.在ACTION_DOWN中调用回调接口中的tryCaptureView方法,看当前touch的view是否允许拖动 2.在ACTION_MOVE中,view的坐标发生改变,调用回调接口中的onViewPositionChanged方法,根据坐标信息对view进行layout,通过ViewHelper这个类中的setScaleX、setScaleY方法,实现拖动的过程中view在XY坐标上进行相应比例的缩放; 3.在ACTIONUP后调用回调接口中的onViewReleased方法,此方法中一个重要的任务是在ACTIONUP事件后,实现view的自动滑动,这里主要是使用了ViewDragHelper中smoothSlideViewTo方法, // CustomViewDragHelper.java public boolean smoothSlideViewTo(View child, int finalLeft, int finalTop) { mCapturedView = child; mActivePointerId = INVALID_POINTER; boolean continueSliding = forceSettleCapturedViewAt(finalLeft, finalTop, 0, 0); if (!continueSliding && mDragState == STATE_IDLE && mCapturedView != null) { // If we're in an IDLE state to begin with and aren't moving anywhere, we // end up having a non-null capturedView with an IDLE dragState mCapturedView = null; } return continueSliding; } 接着到达forceSettleCapturedViewAt方法 // CustomViewDragHelper.java private boolean forceSettleCapturedViewAt(int finalLeft, int finalTop, int xvel, int yvel) { final int startLeft = mCapturedView.getLeft(); final int startTop = mCapturedView.getTop(); final int dx = finalLeft - startLeft; final int dy = finalTop - startTop; if (dx == 0 && dy == 0) { // Nothing to do. Send callbacks, be done. mScroller.abortAnimation(); setDragState(STATE_IDLE); return false; } final int duration = computeSettleDuration(mCapturedView, dx, dy, xvel, yvel); mScroller.startScroll(startLeft, startTop, dx, dy, duration); setDragState(STATE_SETTLING); return true; } 上面start了ViewDragHelper中的mScroller,在滑动过程中,通过重写computeScroll方法,可用用ViewCompat.postInvalidateOnAnimation(this)方法重绘view // DragVideoView.java @Override public void computeScroll() { if (mDragHelper.continueSettling(true)) { ViewCompat.postInvalidateOnAnimation(this); } } 最后由于拖拽过程中的显示视频的TextureView会不断变化,通过设置TextureView.SurfaceTextureListener,来监听当前TextureView的变化过程。 //MainActivity.java @Override public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) { mMediaPlayer.setSurface(new Surface(surface)); } @Override public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) { Log.d(TAG, ">> onSurfaceTextureSizeChanged width=" + width + ", height=" + height); if (width == 540 && height == 303) {//如果视频是最小时, mProgramListView.setAlpha(1.0f);//让节目列表进行展现,变成不透明 } else { //TextureView在拖动过程中 float f = (float) ((1.0 - ((float)width/1080))* 1.0f); Log.d(TAG, ">> onSurfaceTextureSizeChanged f=" + f ); mProgramListView.setAlpha(f);//通过设置比例来让节目列表的listview渐变成不透明。视频区域越小,节目列表变得越不透明(即我们能看到) } mProgramListView.setVisibility(View.VISIBLE); } @Override public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) { finish(); return true; } @Override public void onSurfaceTextureUpdated(SurfaceTexture surface) { }
Spring Boot 是一个用于快速构建基于 Spring 框架的应用程序的开源框架。要实现一个视频播放系统,我们可以使用 Spring Boot 来提供后台服务和管理业务逻辑。 首先,我们需要定义视频的数据模型,包括视频的名称、描述、作者、上传时间等信息。使用 Spring Boot 的 JPA 或者 MyBatis 可以很方便地与数据库进行交互,我们可以使用这些工具来创建视频模型并存储到数据库中。 接下来,我们可以使用 Spring Boot 的 MVC 功能来处理用户的请求。通过创建控制器类,我们可以定义不同的路由和请求处理方法,比如上传视频、删除视频、查找视频等。 为了实现视频播放,我们可以利用 Spring Boot 提供的静态资源映射功能,将视频文件存储在指定的文件夹中,然后在 HTML 页面中通过 URL 来引用这些视频文件。 此外,我们可以使用开源的视频播放器库(如 video.js 或者 jwplayer)来实现视频播放界面的设计和功能,可以将这些库添加到前端页面中,并使用 Spring Boot 提供的 Thymeleaf 或者 FreeMarker 模板引擎来生成动态页面。 对于流媒体的处理,我们可以使用 FFmpeg 或者 Gstreamer 等开源库来处理视频流。结合 Spring Boot 的异步处理和流媒体处理的库,我们可以实现视频的实时转码、流式传输等功能。 最后,为了提高系统的性能和可用性,我们可以使用 Spring Boot 的缓存和负载均衡功能。使用缓存可以减少对数据库的访问,提高系统的响应速度;而负载均衡可以将请求分发到多个服务器上,提高系统的并发处理能力。 综上所述,使用 Spring Boot 可以方便地实现一个视频播放系统,包括数据存储、业务处理、静态资源管理、流媒体处理、前端页面设计等功能。Spring Boot 提供了丰富的功能和组件,能够帮助我们快速开发出高效、可靠的视频播放系统。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值