阿里云实践 - HTML5断点播放m3u8视频(videojs)
Posted WJL_MGQS
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了阿里云实践 - HTML5断点播放m3u8视频(videojs)相关的知识,希望对你有一定的参考价值。
场景:html5页面需要通过<video>标签播放一段200M的服务器视频,默认会需要先下载完视频后才播放,有较长的等待时间;
解决方案:前端通过videojs-contrib-hlsjs.min.js来控制<video>标签进行播放m3u8视频流播放。
步骤:
1:服务端视频video.mp4生成video.ts视频数据包,执行如下命令://文章底部有ffmpeg相关说明
ffmpeg -y -i /deploys/html/statics/video/video.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb /deploys/html/statics/video/video.ts
2:对video.ts进行数据包分割,生成指定单位时长的数据包,这里设置成3秒时长的数据包,并生成数据包的目录文件:video.m3u8
ffmpeg -i /deploys/html/statics/video/video.ts -c copy -map 0 -f segment -segment_list /deploys/html/statics/video/video.m3u8 -segment_time 3 /deploys/html/statics/video/video-%03d.ts
3:前端引用://前后端自己约定video.m3u8的资源路径规则
<script type="text/javascript">
var default_hls_address = 'statics/video/video.m3u8';
var options =
width: 1280,
height: 720,
poster: "statics/video/video.jpg",
autoplay: true,
controls: true,
loop: true,
preload: 'auto',
sourceOrder: true,
sources: [
src: default_hls_address,
type: 'application/x-mpegURL'
,
src: '',
type: 'video/webm'
],
techOrder: ['html5', 'flash'],
flash:
swf: ''
var video = videojs('myvideo', options);
video.on(['loadstart', 'play', 'playing', 'firstplay', 'pause', 'ended', 'adplay', 'adplaying', 'adfirstplay', 'adpause', 'adended', 'contentplay', 'contentplaying', 'contentfirstplay', 'contentpause', 'contentended', 'contentupdate'], function(e)
);
window.onbeforeunload=(e)=>
video.dispose();
</script>
4:因为我生成的单个ts文件也有几百k大小,如果网络不好,会消耗一些时间,导致播放体验不好,所以开启了CDN服务,为ts文件提供CDN访问
注:
1: mp4生成ts数据包及m3u8文件,采用的ffmpeg工具及命令,可以参考文章:
linux下安装ffmpeg的详细教程_Mr·wong的博客-CSDN博客_ffmpeg linux一、centos linux下安装ffmpeg1、下载解压12wget http://www.ffmpeg.org/releases/ffmpeg-3.1.tar.gztar-zxvf ffmpeg-3.1.tar.gz2、 进入解压后目录,输入如下命令/usr/local/ffmpeg为自己指定的安装目录1234cdffmpeg-3.1./configu..https://blog.csdn.net/weixin_39412946/article/details/110426738 2:二次进入页面的时候,可能会出现错误:
videoJS报错:VIDEOJS: WARN: Player “myVideo” is already initialised. Options will not be applied.
参考其它文章:videoJS报错:VIDEOJS: WARN: Player “myVideo” is already initialised. Options will not be applied._weixin_45115895的博客-CSDN博客videoJS报错:VIDEOJS: WARN: Player “myVideo” is already initialised. Options will not be applied.移动端vue项目商品详情页有用到视频播放器,刚进入时没有错误,进入到其他页面再返回到商品详情页就会出现视频缩小到了左上角,且不能再播放了,查看控制台发现报了一个警告VIDEOJS: WARN: Player “myVideo” is already initialised. Options will not be aphttps://blog.csdn.net/weixin_45115895/article/details/106526981
//暂时没法解决,前端准备改vue写法解决;
目前我的做法:对访问的短链接地址跳转页面时,通过nginx动态生成时间戳参数来降低问题出现的几率:http://www.xxxx.com/szhgg 重定向 http://www.xxxx.com/html/index.html?t=1652351901.102
location ~ ^/szhgg
set $t $msec;
rewrite ^/ "/html/index.html?t=$t" permanent;
根据凭证播放阿里云视频测试
<!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>Document</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>
</head>
<body>
<div class="prism-player" id="J_prismPlayer"></div>
<script>
var player = new Aliplayer({
id: \'J_prismPlayer\',
width: \'100%\',
autoplay: false,
cover: \'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png\',
encryptType:\'1\',//如果播放加密视频,则需设置encryptType=1,非加密视频无需设置此项
vid : \'d9c6ebe8a4ce424e89e524b8614146ac\',
playauth : \'eyJTZWN1cml0eVRva2VuIjoiQ0FJU2h3TjFxNkZ0NUIyeWZTaklyNWYvQ0lpRjNJeFQ3b3F0U0UzbzFsSnNlYjE2dXZIWTFqejJJSDlJZEhWb0FPOGZ2dlUwbTJ0WTdQc1psck1xRzhVVkdoV2ROcFV2dDg0TnExendKcExGc3QySjZyOEpqc1YwcktKZS9GbXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRTF5R21DQ2QvWDRvZ3VSUDF6N0VwTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHphRUpHZ1RTNExmWldJbGNUS0FNOVd1MlBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZDE0Sk9CS2cxMUtVR29BQlB4c0xlV2s0TlVHV3BrSTMvNUhhNnJWb3FQZzJ6bE9vS2FFcnZ2UlVaWENhMUZvZlBsd2xINk9oRXNSWUg1ZWxSY2xJbGZERG1xWThOY3RDWWdBRW8wYWNtOFowR0dpR3g3UU8xQm1Pa0dOQU01aXNnQjNaekNTNThUeTMwa1E2UVBWWkw0VTZ0WWdKcUVKdm01eXVtVnhyODltMWg2VU1wKy9jcjdpK0Z4dz0iLCJBdXRoSW5mbyI6IntcIkNJXCI6XCJ2ZzdYNWl5Wis5Rzl4elREMHBNVlZDWWpYNjg5OStNRnJEUnlRNDR4MVNRa2pvYlVGZTZqNkhhdllNOUVZTGJxXCIsXCJDYWxsZXJcIjpcImV0MHRFdWYxMFZ3ZWtUQy9EUVFFNWRLQlNpS3ByeFpXVG5IUSs0ektxRFk9XCIsXCJFeHBpcmVUaW1lXCI6XCIyMDIxLTA2LTEwVDA1OjUyOjQxWlwiLFwiTWVkaWFJZFwiOlwiZDljNmViZThhNGNlNDI0ZTg5ZTUyNGI4NjE0MTQ2YWNcIixcIlNpZ25hdHVyZVwiOlwib1o1KzA2dkpqaE55UUdBNCthYnNmMmh2WHlVPVwifSIsIlZpZGVvTWV0YSI6eyJTdGF0dXMiOiJOb3JtYWwiLCJWaWRlb0lkIjoiZDljNmViZThhNGNlNDI0ZTg5ZTUyNGI4NjE0MTQ2YWMiLCJUaXRsZSI6IjYgLSBXaGF0IElmIEkgV2FudCB0byBNb3ZlIEZhc3RlciIsIkNvdmVyVVJMIjoiaHR0cDovL291dGluLTdiMzE3OTkyNzgwZDExZWI5OTM1MDAxNjNlMWM3NDI2Lm9zcy1jbi1zaGFuZ2hhaS5hbGl5dW5jcy5jb20vZDljNmViZThhNGNlNDI0ZTg5ZTUyNGI4NjE0MTQ2YWMvc25hcHNob3RzL2UzYmU0YTM0MTVmYTRjYTQ5ZjgyZTQ3MjM3ZWIwZjJmLTAwMDAxLmpwZz9FeHBpcmVzPTE2MjMzMDc4NjEmT1NTQWNjZXNzS2V5SWQ9TFRBSXJrd2IyMUt5R2pKbCZTaWduYXR1cmU9dCUyRjRqbmNNSHhUQ0RFaHhXMnZaTkU0aVQzOU0lM0QiLCJEdXJhdGlvbiI6MTYuMjc2N30sIkFjY2Vzc0tleUlkIjoiU1RTLk5USkMyMTFTcllIRkprWTJSOXUyVlU0czQiLCJBY2Nlc3NLZXlTZWNyZXQiOiI2Uk1iN0U0cW00Q0JBS2pSZHJUaVpVNUZmSmlGNFNWaWE2UFZHWVQ0RnR0QSIsIlJlZ2lvbiI6ImNuLXNoYW5naGFpIiwiQ3VzdG9tZXJJZCI6MTgyODcxMTM2NzEyMjI3OX0\',
},function(player){
console.log(\'播放器创建好了。\')
});
</script>
</body>
</html>
以上是关于阿里云实践 - HTML5断点播放m3u8视频(videojs)的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 HTML5 <video> 元素播放 m3u8(文件)视频?
html5<video>解析m3u8播放视频
有支持M3U8格式的HTML5播放器吗
有支持M3U8格式的HTML5播放器吗
有支持M3U8格式的HTML5播放器吗
html5 视频标签 m3u8 文件不起作用