TS file not playing hls.js
Question
Need some help. Video loads in browser but never starts playing. I'm using hls.js to stream m3u8 playlist to the browser. And I use FFmpeg to create ts and m3u8 files.
For FFmpeg :
./ffmpeg -rtsp_transport tcp -i rtsp://user:password@ipaddress/axis-media/media.amp -vcodec copy -hls_time 4 -hls_list_size 4 -hls_wrap 4 -start_number 1 -y test.m3u8
HTML Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
<video id="video" height="800px" width="1200px"></video>
<body>
<script>
var video = document.getElementById('video');
if(Hls.isSupported()){
var hls = new Hls();
hls.loadSource('/images/live/test.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')){
video.src = '/images/live/test.m3u8';
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
</script>
</html>
2 answers
solution1
0 2019-08-27 00:54:10
只需将ffmpeg命令行更改为：ffmpeg -rtsp_transport tcp -i rtsp：// user：password@ip_address/axis-media/media.amp -y -s 854x480 -codec：v libx264 -b：v 800000 -hls_time 4- hls_list_size 4 -hls_wrap 4 start_number 0 test.m3u8
solution2
0 2019-08-27 01:59:54
There are two issues with your code.
the play need the blowser allow the audio auto display
NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
the hls.js cannot access it's map file
request failed with status 404
URL：hls.min.js.map
Just change it to a workable cdn
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/hls.js"></script> </head> <body> <video id="video" height="800px" width="1200px"></video> <body> <script> var video = document.getElementById('video'); if(Hls.isSupported()){ var hls = new Hls(); hls.loadSource('http://vfile1.grtn.cn/2018/1542/0254/3368/154202543368.ssm/154202543368.m3u8'); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED,function() { video.play(); }); } else if (video.canPlayType('application/vnd.apple.mpegurl')){ video.src = 'http://vfile1.grtn.cn/2018/1542/0254/3368/154202543368.ssm/154202543368.m3u8'; video.addEventListener('loadedmetadata',function() { video.play(); }); } </script> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.