您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识
网页视频不能播放(如何实现在线视频播放？)
文件,上传,视频网页视频不能播放(如何实现在线视频播放？)
发布时间：2020-12-06加入收藏来源：互联网点击：
我们已经准备好了工具类：
Mp4VideoUtil.java完成avi转mp4
HlsVideoUtil.java完成mp4转hls
可以直接使用。
6.1 处理流程当视频合并成功后
把视频处理成m3u8流媒体把视频信息写到数据库具体代码： 在合并完成方法中调用
@Value("${xc-service-manage-media.ffmpeg-path}") String ffmpeg_path; private void ChangeHLS(File mergeFile, String fileMd5) { // mp4 文件保存目录 String fileFolderPath = getFileFolderPath(fileMd5); //生成的mp4的文件名称 String mp4_name = fileMd5 ".mp4"; //生成的mp4所在的路径 String mp4folder_path = fileFolderPath; //创建工具类对象 Mp4VideoUtil mp4VideoUtil = new Mp4VideoUtil(ffmpeg_path, mergeFile.getAbsolutePath(), mp4_name, mp4folder_path); //进行处理 String result = mp4VideoUtil.generateMp4(); //4、将mp4生成m3u8和ts文件 //String ffmpeg_path, String video_path, String m3u8_name,String m3u8folder_path //mp4视频文件路径 String mp4_video_path = mp4folder_path mp4_name; //m3u8_name文件名称 String m3u8_name = fileMd5 ".m3u8"; //m3u8文件所在目录 String m3u8folder_path = fileFolderPath "hls/"; HlsVideoUtil hlsVideoUtil = new HlsVideoUtil(ffmpeg_path, mp4_video_path, m3u8_name, m3u8folder_path); //生成m3u8和ts文件 String tsResult = hlsVideoUtil.generateM3u8(); //保存fileUrl（此url就是视频播放的相对路径） String filePath = fileFolderPath "hls/" m3u8_name; // 将fileUrl 保存到数据库 FileMsg fileMsg = new FileMsg(); fileMsg.setFileId(fileMd5); fileMsg.setFileName(mergeFile.getName()); fileMsg.setFilePath(filePath); fileMsg.setFileUrl(filePath.split("C:/school/video")[1]); fileMsgMapper.insert(fileMsg); //优化: 文件处理成功后, 可以删除mp4文件 }
说明：
mp4转成m3u8如何判断转换成功？
第一、根据视频时长来判断，同mp4转换成功的判断方法。
第二、最后还要判断m3u8文件内容是否完整。
4 播放器4.1 技术选型视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或浏览器插件播放器，其中以flash和H5播放器最常见。
flash播放器：缺点是需要在客户机安装Adobe Flash Player播放器，优点是flash播放器已经很成熟了，并且浏览器对flash支持也很好。
H5播放器：基于h5自带video标签进行构建，优点是大部分浏览器支持H5，不用再安装第三方的flash播放器，并且随着前端技术的发展，h5技术会越来越成熟。
本项目采用H5播放器，使用Video.js开源播放器。
Video.js是一款基于HTML5世界的网络视频播放器。它支持HTML5和Flash视频，它支持在台式机和移动设备上播放视频。这个项目于2010年中开始，目前已在40万网站使用。
官方地址：http://videojs.com/
4.2 下载video.jsVideo.js： https://github.com/videojs/video.js
videojs-contrib-hls： https://github.com/videojs/videojs-contrib-hls#installation
（videojs-contrib-hls是播放hls的一个插件）
使用文档：http://docs.videojs.com/tutorial-videojs_.html
本教程使用 video.js 6.7.3 版本，videojs-contrib-hls 5.14.1版本
将资料中提供的plugins赋值到xc-ui-pc-video项目目录下
4.3 搭建媒体服务器正常使用video.js播放视频是通过一个网页，用户通过浏览器打开网页去播放视频，网页和视频都从web服务器请求。
4.3.1 Nginx媒体服务器根据上边的流程，我们在媒体服务器上安装Nginx，并配置如下 ：
server { listen 81; server_name localhost; # 流媒体 静态资源 location ^~ /school/video/ { alias C:/school/video/; } # 视频静态资源 location / { alias C:/CODE/JAVA/school/xc-ui-pc-video/; index index.html index.htm; } }4.4 测试video.js把资料中的video.html 复制到 C:/CODE/JAVA/school/xc-ui-pc-video/ 如图：
上面已经使用nginx 代理 C:/CODE/JAVA/school/xc-ui-pc-video/ 目录。 所以可以通过http请求直接访问video.html页面
把src路径修改为自己的媒资访问路径测试：用户打开浏览器输入 http://localhost:81/video.html 。即可打开视频播放页面，并播放。
本文到此结束，希望对大家有所帮助呢。
上一篇：网页打不开的原因(电脑打不开网页怎么办？快看看是不是dns配置错误)
下一篇：返回列表
相关链接 |
||
| 网友回复（共有 0 条回复） |