最近，m3u8视频如何在HTML页面上进行播放。找了半天都没找到，花了一天时间将问题解决，为了方便别人，编写了这篇日志。实现html页面下m3u8格式视频的播放。
网上也有人说了，需要用到jwplayer。
网页代码如下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="apple-touch-icon" href="logo.png" />
<title>校园观光车实景查看</title>
<style type="text/css">
<!--
body {
background-color:#680000;
font-family: sans-serif;
font-size: 0.9em;
}
.code {
font-family: monospace;
font-size: 130%;
}
a {
color: red;
background: white;
text-decoration: none;
}
#information {
padding-top: 1em;
padding-bottom: 1em;
}
.spiffy{display:block}
.spiffy *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#fff}
.spiffy1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #b60600;
border-right:1px solid #b60600;
background:#df0b00}
.spiffy2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #8c0100;
border-right:1px solid #8c0100;
background:#e60c00}
.spiffy3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #e60c00;
border-right:1px solid #e60c00;}
.spiffy4{
border-left:1px solid #b60600;
border-right:1px solid #b60600}
.spiffy5{
border-left:1px solid #df0b00;
border-right:1px solid #df0b00}
.spiffyfg{
padding:1em;
background-color:#fff;
}
-->
</style>
</head>
<body>
<script type='text/javascript' src='jwplayer.js'></script>
<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
<p>通过这个网页您就可以看到校园观光车现在所处的位置，以及运行的情况也就是对校园车的行踪能够了如指掌，很好地解决了校车去哪儿的问题</p>
<center>
<b>可爱的校车</b>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'player.swf',
'file': 'test',
'streamer': 'rtmp://172.16.97.29:1935/hls',
'controlbar': 'bottom',
'width': '848',
'height': '360'
});
</script>
<br />
</center>
<br />
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>
</body>
</html>
核心代码
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'player.swf',
'file': 'test',
'streamer': 'rtmp://172.16.97.29:1935/hls',
'controlbar': 'bottom',
'width': '848',
'height': '360'
});
</script>
解释：
执行转码的命令如下：
ffmpeg -i rtsp://admin:12345@172.33.23.98 -vcodec copy -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 -f flv rtmp://172.16.97.29:1935/hls/test
注意：名称为test
不能够写成了：test.m3u8
路径：rtmp://172.16.97.29:1935/hls
不能够写成了：rtmp://172.16.97.29:1935/hls/test
需要的js等文件，大家可以到我的资源里面看，有一个相关的实例。
运行效果如下
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
