最近想开发一个在线教育类的移动Web，涉及到一个问题就是在线视频播放问题，起初以为一个video标签不就搞定，但是后来考虑到网络带宽，视频地址，文件的加密，就不得做进一步处理。

技术栈

由于涉及到前后端，这里后端是采用nede的Koa框架，其实原理大都一样。前端使用HTML结构，播放器使用腾讯播放器的SDK。

腾讯播放器官方文档：https://cloud.tencent.com/document/product/881

实现

后端

可以到仓库直接克隆一个工程化项目做基本：

git clone git@gitee.com:lsfcxz/koa_start.git

npm i

npm run start

准备工作：

需要把mp4转成hls格式，即一个m3u8文件和多个ts文件。这里推荐一个在线转换网站：https://mp4.to/hls

把文件放在项目的public目录下，项目集成了koa-static这个中间件，所以访问：http://localhost:3000:/test/test.m3u8 的时候是可以去访问到文件

注意：test是文件夹，个人喜欢把文件归到一个文件夹下面，test.m3u8当然就是文件名字。m3u8和ts要放在同一级目录，不放在一起就需要改#EXTINF:下面的ts文件路径。

前端

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>在线视频</title><style></style>
</head><body><!-- 视频容器 --><div id="id_test_video" style="width:100%; height:auto;"></div><!-- 腾讯播放器SDK  --><script src="https://web.sdk.qcloud.com/player/tcplayerlite/release/v2.4.1/TcPlayer-2.4.1.js"charset="utf-8"></script>;<script>var player = new TcPlayer('id_test_video', {"m3u8": 'http://192.168.0.105:3000/test/test.m3u8', //请替换成实际可用的播放地址"autoplay": true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的"poster": "","width": '480',//视频的显示宽度，请尽量使用视频分辨率宽度"height": '320'//视频的显示高度，请尽量使用视频分辨率高度});</script>
</body></html>

如果前端能够正常播放视频，说明已经成功。

这里的URL是不能被直接访问的：

总结

以上虽然一定程度加大了视频盗取成本，但是破解的方式也很简单，只要把ts文件和m3u8文件下载下来，然后再转回来就可以得到视频文件，再者hls这个东西适合做这种录播，点播，不适合做直播这种实时的，延时大，因为其原理就是把文件分片传输，分片大小也决定了传输的效率。

网站在线视频播放实现相关推荐

在线视频播放网站服务器配置,在线播放视频网站应该如何选择服务器
原标题:在线播放视频网站应该如何选择服务器我们都知道视频类应用对服务器的要求是非常高的,特别是在线播放的视频类网站.要满足大量用户同时在线观看视频,并且做到随意拖动进度条都能流畅播放,对服务器的配置 ...
Python+QT+Selenium制作在线视频播放器
最近突然想做一个视频播放器,可以在线看视频,关键还没用广告,不用会员,下面给大家介绍一下怎么制作工具: Python Qt phantomjs 先给大家展示一下效果下面上代码导入库: from ...
基于Html5的兼容所有主流浏览器的在线视频播放器videoJs
在一个新的项目上需要实现在线视频播放,原本打算借助优酷的视频存储和播放,但是发现这个需要用户注册优酷账户,严重影响用户体验,于是这个方案被毙掉了.于是开始了自己开发一个在线播放器的想法,当然尽量使用已 ...
十款开源在线视频播放器
转http://blog.lixiphp.com/10-top-free-opensource-flv-player/ 10 Free Open Source embeddable Video Pla ...
分享一款在线视频播放器：h-player
欢迎关注我的公众号:「阿拉平平」有需要的小伙伴可以在微信后台回复 hplayer 获取安装包和视频源最近在 GitHub[1] 上找了一款非常好用的在线视频播放器:h-player,和大家分享一下 ...
ssm基于B/S的在线视频播放系统java项目
视频播放为人们提供了丰富的信息来源,并在一定程度上丰富了人们的精神文明.而传统的视频播放手段如电视播放.影院播放,都存在一定的局限性.人们亟需一种能够实时播放网络视频资源的产品,在线视频播放系统的出现 ...
给小孩发布一个有趣的网站在线动物园
给小孩发布一个有趣的网站在线动物园,可以实时看到动物园里的动物实时摄像头. 非常有意思,大热天也不用到动物园里看了. http://zoo.baidu.com/video.html
第四百零三节，python网站在线支付，支付宝接口集成与远程调试，
第四百零三节,python网站在线支付,支付宝接口集成与远程调试, windows系统安装Python虚拟环境首先保证你的系统已经安装好了Python 安装virtualenv C:\WINDOWS ...
播放视频android学习笔记---44_在线视频播放器,网络视频解析器,SurfaceView 控件使用方法...
最近用使开辟的过程中涌现了一个小题问,顺便录记一下因原和法方--播放视频 44_在线视频播放器 ------------------------- 1.注意这里,在模拟器中,android2.2和an ...
推荐几个手机网站在线预览测试工具
随着移动互联网的爆发,移动端的布局成了大多数企业的刚需,而手机网站也慢慢成为一个营销企业的标配,包括百度.当当网在内的很多网站,移动端流量已经超过PC端流量,越来越的企业都在建立和完善自己的手机网站, ...

网站在线视频播放实现

技术栈

实现

后端

前端

总结

网站在线视频播放实现相关推荐

最新文章

热门文章