用html5的video标签做视频，播放效果很卡

vicfir 2016-01-06 04:21:41

我用的html5的video标签做的一个视频播放系统挂在了外网服务器上，后台采用的SSH2框架，tomcat服务器，但是在播放视频的时候会很卡，视频文件稍大的话，基本就播放不了，我想过原因可能是带宽不够，不过这个是硬性条件，我想请问下大家有没有别的方面的思考或者想法可以告诉我一下，谢谢啦～
附上网站地址：http://210.36.22.71/share （大家可以体验下，网站上有个视频首页，点击进去就可以选择播放视频，在播放的时候很卡。。。）

...全文

13935 10 打赏收藏转发到动态举报

写回复

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

tianfang 2016-01-20

打赏
举报

回复

看了一下，北方访问挺卡的，这个是网络问题你的视频文件访问也是tomcat做的？比如这个视频： http://210.36.22.71/share/upload/vedio/EDCC80518C6840EA9CAD2A1689F5A03A.mp4 可以在tomcat前面加一个nginx或者httpd 做http静态文件分发和ajp代理，比都用tomcat性能好

jie_net 2016-01-20

打赏
举报

回复

楼主你解决视频很卡的问题了吗？我看你也个http://210.36.22.71/share 网站的视频还是挺流畅的，所以来求方法了，请帮帮忙吧！

xuan.ye 2016-01-20

打赏
举报

回复

lz ，看到有人用 node.js 做视频服务器，据说速度杠杠的，要不你也试试？回头告诉我们好用不好用？

xuan.ye 2016-01-20

打赏
举报

回复

测了一下，挺快呀，黑龙江电信

attilax 2016-01-09

打赏
举报

回复

你现在内网测试下看速度如何。。另外。这个video标签是使用浏览器自带的扩展播放的。。可能对格式速度什么的支持不佳。。。如果内网测试速度没问题就是这个video标签的情况了。。。可能要使用插件模式来实现视频播放比较好了。。

风马博客 2016-01-08

打赏
举报

回复 1

autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 height pixels 设置视频播放器的高度。 loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。 preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 src url 要播放的视频的 URL。 width pixels 设置视频播放器的宽度。看下吧，具体属性都在这里了

执笔记忆的空白 2016-01-08

打赏
举报

回复

看看这个能用不

vicfir 2016-01-08

打赏
举报

回复

@执笔记忆的空白对啊，大小基本都在200M以上。要怎么解决呢？或者提供一下思路

枫林_ 2016-01-08

打赏
举报

回复

是有点卡阿，顶，等大神

执笔记忆的空白 2016-01-06

打赏
举报

回复

你的视频文件很大么？

在Gmail记录和发送视频邮件。跟踪电子邮件打开和视频播放。计划在未来的任何一天或时间发送，并且更多! 使用炸弹炸弹视频可获得更好的效果。使用BombBomb Chrome扩展程序，可以在任何地方快速轻松地添加视频。您的数字通信应该像面对面的会议一样热情，个性化和有效。正确的？这就是问题所在……电子邮件收件箱很拥挤，传统的纯文本消息无法获得您过去的答复和结果，而且始终没有一种简单的方法可以将视频发送给最重要的人你的事。你必须脱颖而出。使用BombBomb Chrome扩展程序，可以轻松录制，发送和跟踪视频，而无需在Chrome中保留当前标签，因此当您无法亲自参加时，您可以“亲自参加”。操作方法如下：1.将BombBomb扩展程序添加到Google Chrome。 2.使用您的BombBomb电子邮件地址和密码登录-或开始免费试用。 3.录制视频，然后通过电子邮件，链接或通过HTML将其嵌入到任何地方。 4.通过用个人视频替换纯文本通信，享受更好的结果。我们了解视频令人沮丧和复杂的原因，这就是为什么BombBomb通过轻松地将个人视频添加到他们的数字通信中来帮助超过40,000人（各个行业的个人，团队和整个组织）获得更好的结果的原因。 BombBomb可以在几乎每个销售参与平台，客户支持票务系统或CRM中使用，包括Gmail，Outlook，Salesloft，Outreach.io，LinkedIn InMail，Slack，Salesforce，Zendesk等。因此，如果您准备好从一个会被忽略的不露面文字文本变成一个在拥挤的电子邮件收件箱中脱颖而出的真实人物，请立即下载BombBomb Video Chrome Extension。以下是一些其他功能的列表：-在Gmail中或直接从Chrome扩展程序录制和发送视频。 -几乎在任何地方复制和粘贴视频的URL。 -我们正在申请专利的视频上传器和编码器使您几乎可以立即发送视频。 -将BombBomb库中的所有视频添加到电子邮件中。 -跟踪电子邮件将打开以发送任何邮件，跟踪电子邮件将打开，视频播放将发送视频电子邮件。 -确切了解每一封电子邮件的收件人，内容和时间以及链接单击和视频播放的时间，因此您可以在头脑风暴的同时进行跟进。 -在Gmail，移动设备和台式机上获取实时打开和播放通知。 -安排您的电子邮件或视频电子邮件在将来的任何一天和任何时间发送。 -如果您的电子邮件尚未打开，请设置提醒自己进行跟进。使用BombBomb视频的切实好处-84％的受访者表示，他们得到了更多的答复。 -90％的点击获得了更多。 -92％的人保持联系更加有效。 -使用视频可以节省您的时间，因为平均而言，您的语音通话速度比输入速度快4倍。 -一次坐好几封电子邮件和视频，节省时间，然后安排它们在将来的最佳时间使用-改善跟进：从Gmail发送并在多个平台（Gmail，移动设备，笔记本电脑/桌面），免费试用BombBomb视频2周，无需使用信用卡，然后开始用视频使您的通信更加人性化。支持语言:English

本课程将使用 flutter 实现类似抖音首页面效果通过 TabBar 与 TabBarView 结合使用实现仿抖音APP首页面关注与推荐页面左右滑动ui构建通过 PageView 来实现上下整屏切换效果使用 VideoPlayer组件实现视频播放功能通过 CircularProgressIndicator实现有圆形背景样式的按钮浮在视频列表上方来实现控制视频的播放与暂停，并会综述一个 Align 在手机坐标系中的对齐方式通过 ClipOval、CachedNetworkImage 实现圆形头像通过 showModalBottomSheet 实现从页面底部上滑的弹框，结合 ListView 实现弹框显示评论列表功能通过 showModalBottomSheet 实现从页面底部上滑的弹框，结合 GridView 实现弹框显示九宫格列表功能

# RapidDevelop-Android快速开发框架 - 框架持续更新中 - 这个框架是从平时项目里用的比较多的框架里整合而来 - 对本项目感兴趣的可以一起研究喜欢的朋友欢迎star - 同时也欢迎大家的宝贵意见issues - 如果大家对MVP模式的开发网络爬虫以及缓存策略感兴趣的话可以看看我最新写的[Freebook](https://github.com/80945540/FreeBook) - 邮箱:mychinalance@gmail.com - [API地址](http://mylance.top/index.html) - [下载APK](http://fir.im/LCRapidDevelop) ###[English](README_EN.md) -------- ##功能说明 - 异常崩溃统一管理 - retrofit rxjava okhttp rxcache------------------------------网络请求以及网络缓存 - Demo采用MVP模式开发------------------------------------数据逻辑复用,便于维护升级 - 下拉刷新上拉加载及自动加载---------------------------实现监听方便快捷 - RecyclerView设配器------------------------------------------再也不需要写ViewHolder - RecyclerView item加载动画--------------------------------多种动画效果一行代码解决 - 页面状态统一管理加载中无数据无网络-------------所有页面均可添加 - 图片显示与缓存 GIF图片显示 - Tab+Fragment快速实现 - 视频播放(仿QQ空间,秒拍等List播放) -------- ##效果图展示 ![下拉刷新](image/image1.gif) ![动画](image/image2.gif) ![](image/image3.gif) ![多布局](image/image4.gif) ![视频播放](image/image5.gif) ![状态页面](image/image6.gif)![状态页面](image/image7.gif) -------------- ##使用说明导入 lcrapiddeveloplibrary 到项目在 build.gradle 的 dependencies 添加: dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') .... compile project(':lcrapiddeveloplibrary') } ##轻松实现异常统一管理 MyApplication里面初始化就可以了 ``` public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); //初始化异常管理工具 Recovery.getInstance() .debug(true)//关闭后在错误统一管理页面不显示异常数据 .recoverInBackground(false) .recoverStack(true) .mainPage(WelcomeActivity.class)//恢复页面 .init(this); } } ``` ##轻松实现状态页面下拉刷新自动加载 item动画首先layout.xml里面的编写啦列表页面基本都是这个套路 ```   ``` 然后就是Activity里面的编写了这个例子里使用MVP模式编写感兴趣的看我最新写的[Freebook](https://github.com/80945540/FreeBook) ``` public class ListvViewActivity extends AppCompatActivity implements BaseQuickAdapter.RequestLoadMoreListener,SpringView.OnFreshListener,SchoolListView { RecyclerView mRecyclerView; ProgressActivity progress; private Toolbar toolbar; private BaseQuickAdapter mQuickAdapter; private int PageIndex=1; private SpringView springView; private SchoolListPresent present; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_listv_view); initView(); } private void initView() { present = new SchoolListPresent(this); mRecyclerView = (RecyclerView) findViewById(R.id.rv_list); springView = (SpringView) findViewById(R.id.springview); //设置下拉刷新监听 springView.setListener(this); //设置下拉刷新样式 springView.setHeader(new RotationHeader(this)); //springView.setFooter(new RotationFooter(this));mRecyclerView内部集成的自动加载上啦加载用不上在其他View使用 progress = (ProgressActivity) findViewById(R.id.progress); //设置RecyclerView的显示模式当前List模式 mRecyclerView.setLayoutManager(new LinearLayoutManager(this)); //如果Item高度固定增加该属性能够提高效率 mRecyclerView.setHasFixedSize(true); //设置页面为加载中.. progress.showLoading(); //设置适配器 mQuickAdapter = new ListViewAdapter(R.layout.list_view_item_layout,null); //设置加载动画 mQuickAdapter.openLoadAnimation(BaseQuickAdapter.SCALEIN); //设置是否自动加载以及加载个数 mQuickAdapter.openLoadMore(6,true); //将适配器添加到RecyclerView mRecyclerView.setAdapter(mQuickAdapter); //设置自动加载监听 mQuickAdapter.setOnLoadMoreListener(this); //请求网络数据 present.LoadData(PageIndex,12,false); } //自动加载 @Override public void onLoadMoreRequested() { PageIndex++; present.LoadData(PageIndex,12,true); } //下拉刷新 @Override public void onRefresh() { PageIndex=1; present.LoadData(PageIndex,12,false); } /* * MVP模式的相关状态 * * */ @Override public void showProgress() { progress.showLoading(); } @Override public void hideProgress() { progress.showContent(); } @Override public void newDatas(List newsList) { //进入显示的初始数据或者下拉刷新显示的数据 mQuickAdapter.setNewData(newsList);//新增数据 mQuickAdapter.openLoadMore(10,true);//设置是否可以下拉加载以及加载条数 springView.onFinishFreshAndLoad();//刷新完成 } @Override public void addDatas(List addList) { //新增自动加载的的数据 mQuickAdapter.notifyDataChangedAfterLoadMore(addList, true); } @Override public void showLoadFailMsg() { //设置加载错误页显示 progress.showError(getResources().getDrawable(R.mipmap.monkey_cry), Constant.ERROR_TITLE, Constant.ERROR_CONTEXT, Constant.ERROR_BUTTON, new View.OnClickListener() { @Override public void onClick(View v) { PageIndex=1; present.LoadData(PageIndex,12,false); } }); } @Override public void showLoadCompleteAllData() { //所有数据加载完成后显示 mQuickAdapter.notifyDataChangedAfterLoadMore(false); View view = getLayoutInflater().inflate(R.layout.not_loading, (ViewGroup) mRecyclerView.getParent(), false); mQuickAdapter.addFooterView(view); } @Override public void showNoData() { //设置无数据显示页面 progress.showEmpty(getResources().getDrawable(R.mipmap.monkey_cry),Constant.EMPTY_TITLE,Constant.EMPTY_CONTEXT); } } ``` ##轻松实现视频列表播放列表部分和上面的一样就不说了,我这边主要描叙视频播放的部分是在不懂得可以clone到本地仓库跑一边 item_layout.xml ``` Video.JCVideoPlayerStandard android:id="@+id/video_list_item_playr" android:layout_width="match_parent" android:layout_height="wrap_content"/> ``` 然后就是adapter里面对视频控件的赋值处理 ``` public class VideoLisViewAdapter extends BaseQuickAdapter<VideoListDto> { public VideoLisViewAdapter(int layoutResId, List<VideoListDto> data) { super(layoutResId, data); } public VideoLisViewAdapter(List<VideoListDto> data) { super(data); } public VideoLisViewAdapter(View contentView, List<VideoListDto> data) { super(contentView, data); } @Override protected void convert(BaseViewHolder helper, VideoListDto item) { helper.setText(R.id.video_list_item_text_title,item.getTitle()).setText(R.id.video_list_item_text_context,item.getIntroduction()); //Glide加载图片并且支持gif动图 Glide.with(mContext) .load(item.getPictureUrl()) .crossFade() .placeholder(R.mipmap.def_head) .into((ImageView) helper.getView(R.id.video_list_item_image)); //对视频的赋值添加视频播放地址(使用原地址 .mp4之类的这个要注意)和标题 ((JCVideoPlayerStandard)helper.getView(R.id.video_list_item_playr)).setUp(item.getAppVideoUrl(),item.getTitle()); Glide.with(mContext) .load(item.getPictureUrl()) .crossFade() .placeholder(R.mipmap.main_mini_m) .into((((JCVideoPlayerStandard) helper.getView(R.id.video_list_item_playr)).thumbImageView)); } } ``` ###Tab+Fragment快速实现还是原来的配方 layout.xml ``` <?xml version="1.0" encoding="utf-8"?>  <FrameLayout android:id="@+id/tab" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#fff" /> ``` 然后就是头部的xml编写了 ``` ``` 完全可以按照自己想要的风格玩下面表格为可设置的属性 --------- |attr|描述| |:--|:-------| | stl_indicatorAlwaysInCenter | 如果设置为真,有源标签总是显示在中心(如报摊google app),默认的错误| | stl_indicatorWithoutPadding | 如果设置为true,画的指标没有填充选项卡中,默认的错误| | stl_indicatorInFront | 画前的指示器下划线,默认的错误| | stl_indicatorInterpolation | 行为的指标:“线性”或“智能”| | stl_indicatorGravity | 图的位置指示器:“底”或“前”或“中心”,默认“底”| | stl_indicatorColor | 标志的颜色| | stl_indicatorColors | 多种颜色的指标,可以设置每个选项卡的颜色| | stl_indicatorThickness | 厚度指标| | stl_indicatorWidth | 的宽度指标,默认“汽车”| | stl_indicatorCornerRadius | 圆角半径的指标| | stl_overlineColor | 顶线的颜色| | stl_overlineThickness | 顶线的厚度| | stl_underlineColor | 颜色的底线| | stl_underlineThickness | 厚度的底线| | stl_dividerColor| 颜色之间的分隔器选项卡| | stl_dividerColors| 多种颜色的选项卡之间的分隔器,可以设置每个选项卡的颜色| | stl_dividerThickness | 分频器的厚度| | stl_defaultTabBackground | 背景可拉的每个选项卡。一般设置StateListDrawable| | stl_defaultTabTextAllCaps | 如果设置为真,所有选项卡标题大写,违约事实| | stl_defaultTabTextColor | 文本的颜色包括默认的选项卡| | stl_defaultTabTextSize | 文本包括默认的选项卡的大小| | stl_defaultTabTextHorizontalPadding| 文本布局填充默认的选项卡包括| | stl_defaultTabTextMinWidth| 最小宽度的标签| | stl_customTabTextLayoutId | 布局ID定义自定义选项卡。如果你不指定一个布局,使用默认选项卡| | stl_customTabTextViewId | 文本视图ID在一个自定义选项卡布局。如果你不与customTabTextLayoutId定义,不工作| | stl_distributeEvenly | 如果设置为真,每个选项卡都给出同样的重量,默认的错误| | stl_clickable | 如果设置为false,禁用选择选项卡单击,违约事实| | stl_titleOffset | 如果设置为“auto_center”,中间的幻灯片的位置选项卡中心将继续。如果指定一个维度将抵消从左边缘,默认24 dp| | stl_drawDecorationAfterTab | 画装饰(指示器和线)绘图选项卡后,默认的错误| -------- 好了接下来就TabActivity ``` public class TabActivity extends AppCompatActivity { ViewGroup tab; ViewPager viewpager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab); initView(); } private void initView() { tab = (ViewGroup) findViewById(R.id.tab); viewpager = (ViewPager) findViewById(R.id.viewpager); //使用方才定义头部 tab.addView(LayoutInflater.from(this).inflate(R.layout.tab_top_layout, tab, false)); SmartTabLayout viewPagerTab = (SmartTabLayout) findViewById(R.id.viewpagertab); FragmentPagerItems pages = new FragmentPagerItems(this); //添加Fragment FragmentPagerItem.of("头部显示标题", "建立的fragment","需要传值的可以传Bundle") for (int i=0;i<4;i++) { pages.add(FragmentPagerItem.of("Tab"+i, TabFragment.class)); } FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter( getSupportFragmentManager(), pages); viewpager.setAdapter(adapter); viewPagerTab.setViewPager(viewpager); } } ``` -------- ##特别感谢 - [JieCaoVideoPlayer](https://github.com/lipangit/JieCaoVideoPlayer) - [SpringView](https://github.com/liaoinstan/SpringView) - [SmartTabLayout](https://github.com/ogaclejapan/SmartTabLayout) - [BaseRecyclerViewAdapterHelper](https://github.com/CymChad/BaseRecyclerViewAdapterHelper) - [Recovery](https://github.com/80945540/Recovery)

在同一页面实现大小视频同步播放（类似微信视频聊天效果）效果描述：大小视频可以同步播放，大小视频可以切换，小视频可以自动判断隐藏与现实，实现全屏与退出全屏。实现思路：在视频播放与暂停、卡住、快进的时候同步播放时间，利用样式来切换两个视频播放尺寸的大小，利用div可以全屏的API来实现全屏功能，最后手撸一个小视频拖拽（考虑全屏后退出全屏时小视频的位置问题使用right与bottom定位），大小视频...

67,513

社区成员

225,878

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章