vlc的应用之六：简单的视频点播系统(B/S)的实现
2014-09-26 14:36
288 查看
原文地址:http://jeremiah.blog.51cto.com/539865/161433/
1. 大体的架构及流程
实现视频点播系统，B/S架构，服务端至少应该是两个服务器：流媒体服务器，web服务器。客户端则就是web页面。当开启页面后则是客户端和服务器的第一次交互，通过http协议得到页面。里面会有流媒体地址的信息，浏览器里面点击显示视频组件，将流媒体的地址传给流媒体播放器，并启动播放器去请求视频。这是第二次交互。服务器端流媒体服务器发送流给客户端，页面上播放就okay了。
2. 环境及所需软件
Jeremiah的测试环境是xp sp2及IE8浏览器。IP地址：172.16.128.8. 与IP有关的地址，请根据个人情况自己改。
服务端：
流媒体服务器先用个简单的：live555 Media Server(http://www.live555.com/mediaServer/windows/live555MediaServer.exe)
Web服务器：Jeremiah以前学的JAVA，所以用Tomcat。IIS或者其他的Web服务器都可以。其实Jeremiah这个小系统用的是静态页面，所以如果是在本机测试的话，不用Web服务器也是okay的。模拟本地打开为Web浏览。
客户端：vlc-0.9.4的Activex。需要把Activex注册好（参考/article/4430496.html）
3. 配置流媒体服务器
下载完live555 Media Server之后放到d:/video下面，启动时会有以下信息：
"Play streams from this server using the URL
rtsp://172.16.128.8/<filename>
where <filename> is a file present in the current directory."
并且后面还会有live555支持的视频格式。本测试就用的mp3和ts格式。其他格式没有试验过。
mp3好说，ts怎么得到呢？这时候vlc就出场了。vlc有转换保存功能，媒体->转换/保存->选择某个文件后点击转换/保存->流输出页面勾选本地播放，勾选文件并且浏览得到个文件名，注意后缀为ts而不是ps，方案封装选MPEG-TS，然后点击save。把你选择的视频播放一遍之后，ts格式的文件就生成好了。
将生成好的ts文件和网上下载的mp3放到d:/video下面，本测试为01.ts及02.mp3。这样流媒体服务器就配置好了。
4. web页面代码
本web页面代码是vlc的Activex测试代码test.html上修改精简的。(没写注释，因为看着不难。)
vod.html：
<!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" >
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<script>
var itemId = 0;
function getVLC(name)
{
if (window.document[name])
{
return window.document[name];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[name])
return document.embeds[name];
}
else
{
return document.getElementById(name);
}
}
function doGo(mrl)
{
var vlc = getVLC("vlc");
itemId=vlc.playlist.add(mrl);
vlc.playlist.playItem(itemId);
document.getElementById("btn_stop").disabled = false;
}
function updateVolume(deltaVol)
{
var vlc = getVLC("vlc");
vlc.audio.volume += deltaVol;
}
function doPlay()
{
vlc.playlist.playItem(itemId);
document.getElementById("btn_stop").disabled = false;
document.getElementById("btn_play").disabled = true;
}
function doStop()
{
getVLC("vlc").playlist.stop();
document.getElementById("btn_stop").disabled = true;
document.getElementById("btn_play").disabled = false;
}
</script>
</head>
<body>
<div style="margin: 50px">
<a title="rtsp://172.16.128.8/01.ts" href="#" onclick="doGo(this.title);return
false;">01.ts</a>
<span style="margin:
20px;" />
<a title="rtsp://172.16.128.8/02.mp3" href="#" onclick="doGo(this.title);return
false;">02.mp3</a>
<span style="margin:
20px;" />
</div>
<div>
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="640"
height="480"
id="vlc"
events="true">
<param name="mrl" value="" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="false" />
<param name="autoplay" value="false" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage="http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="640"
height="480"
name="vlc">
</embed>
</object>
</div>
<div>
<input type=button id="btn_play" value="
播放 " onClick='doPlay();' disabled="true">
<input type=button id="btn_stop" value="停止" onClick='doStop();' disabled="true">
<input type=button value="静音切换" onclick='getVLC("vlc").audio.togglemute();'>
<input type=button value="减小音量" onclick='updateVolume(-10)'>
<input type=button value="增加音量" onclick='updateVolume(+10)'>
</div>
</body>
</html>
将vod.html放置到Web服务器中。我就不多说了。so简单。
5. 访问vod.html
访问前请确保客户端Activex控件已注册成功。
打开IE输入http://172.16.128.8:8080/vod/vod.html后访问到我们上面写的页面。然后点击01.ts超链接，在下面的vlc的Activex上就会显示视频了。这样，一个简单的点播系统就做好了。
请注意下面图片的视频上的地址。
6. C/S架构的实现
做成跟pplive类似的客户端，考虑与服务器的两次交流，第二次交流是没有问题的，关键在第一次交流上。如果客户端做成嵌入IE的方式，如C#的WebBrowser，则点击某个视频地址的信息模块，如超链接，无法将超链接的地址传给播放器组件了。Jeremiah考虑的解决的方法就是第一次与Web服务器的交流可以用xml来实现。客户端获取xml，然后解析，然后显示到某个组件里面，如C#的Listbox，这样点击这个组件就可以轻易的将视频地址传给播放器组件了。pplive的频道列表，估计就是用的这种方式。
1. 大体的架构及流程
实现视频点播系统，B/S架构，服务端至少应该是两个服务器：流媒体服务器，web服务器。客户端则就是web页面。当开启页面后则是客户端和服务器的第一次交互，通过http协议得到页面。里面会有流媒体地址的信息，浏览器里面点击显示视频组件，将流媒体的地址传给流媒体播放器，并启动播放器去请求视频。这是第二次交互。服务器端流媒体服务器发送流给客户端，页面上播放就okay了。
2. 环境及所需软件
Jeremiah的测试环境是xp sp2及IE8浏览器。IP地址：172.16.128.8. 与IP有关的地址，请根据个人情况自己改。
服务端：
流媒体服务器先用个简单的：live555 Media Server(http://www.live555.com/mediaServer/windows/live555MediaServer.exe)
Web服务器：Jeremiah以前学的JAVA，所以用Tomcat。IIS或者其他的Web服务器都可以。其实Jeremiah这个小系统用的是静态页面，所以如果是在本机测试的话，不用Web服务器也是okay的。模拟本地打开为Web浏览。
客户端：vlc-0.9.4的Activex。需要把Activex注册好（参考/article/4430496.html）
3. 配置流媒体服务器
下载完live555 Media Server之后放到d:/video下面，启动时会有以下信息：
"Play streams from this server using the URL
rtsp://172.16.128.8/<filename>
where <filename> is a file present in the current directory."
并且后面还会有live555支持的视频格式。本测试就用的mp3和ts格式。其他格式没有试验过。
mp3好说，ts怎么得到呢？这时候vlc就出场了。vlc有转换保存功能，媒体->转换/保存->选择某个文件后点击转换/保存->流输出页面勾选本地播放，勾选文件并且浏览得到个文件名，注意后缀为ts而不是ps，方案封装选MPEG-TS，然后点击save。把你选择的视频播放一遍之后，ts格式的文件就生成好了。
将生成好的ts文件和网上下载的mp3放到d:/video下面，本测试为01.ts及02.mp3。这样流媒体服务器就配置好了。
4. web页面代码
本web页面代码是vlc的Activex测试代码test.html上修改精简的。(没写注释，因为看着不难。)
vod.html：
<!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" >
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<script>
var itemId = 0;
function getVLC(name)
{
if (window.document[name])
{
return window.document[name];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[name])
return document.embeds[name];
}
else
{
return document.getElementById(name);
}
}
function doGo(mrl)
{
var vlc = getVLC("vlc");
itemId=vlc.playlist.add(mrl);
vlc.playlist.playItem(itemId);
document.getElementById("btn_stop").disabled = false;
}
function updateVolume(deltaVol)
{
var vlc = getVLC("vlc");
vlc.audio.volume += deltaVol;
}
function doPlay()
{
vlc.playlist.playItem(itemId);
document.getElementById("btn_stop").disabled = false;
document.getElementById("btn_play").disabled = true;
}
function doStop()
{
getVLC("vlc").playlist.stop();
document.getElementById("btn_stop").disabled = true;
document.getElementById("btn_play").disabled = false;
}
</script>
</head>
<body>
<div style="margin: 50px">
<a title="rtsp://172.16.128.8/01.ts" href="#" onclick="doGo(this.title);return
false;">01.ts</a>
<span style="margin:
20px;" />
<a title="rtsp://172.16.128.8/02.mp3" href="#" onclick="doGo(this.title);return
false;">02.mp3</a>
<span style="margin:
20px;" />
</div>
<div>
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="640"
height="480"
id="vlc"
events="true">
<param name="mrl" value="" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="false" />
<param name="autoplay" value="false" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage="http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="640"
height="480"
name="vlc">
</embed>
</object>
</div>
<div>
<input type=button id="btn_play" value="
播放 " onClick='doPlay();' disabled="true">
<input type=button id="btn_stop" value="停止" onClick='doStop();' disabled="true">
<input type=button value="静音切换" onclick='getVLC("vlc").audio.togglemute();'>
<input type=button value="减小音量" onclick='updateVolume(-10)'>
<input type=button value="增加音量" onclick='updateVolume(+10)'>
</div>
</body>
</html>
将vod.html放置到Web服务器中。我就不多说了。so简单。
5. 访问vod.html
访问前请确保客户端Activex控件已注册成功。
打开IE输入http://172.16.128.8:8080/vod/vod.html后访问到我们上面写的页面。然后点击01.ts超链接，在下面的vlc的Activex上就会显示视频了。这样，一个简单的点播系统就做好了。
请注意下面图片的视频上的地址。
6. C/S架构的实现
做成跟pplive类似的客户端，考虑与服务器的两次交流，第二次交流是没有问题的，关键在第一次交流上。如果客户端做成嵌入IE的方式，如C#的WebBrowser，则点击某个视频地址的信息模块，如超链接，无法将超链接的地址传给播放器组件了。Jeremiah考虑的解决的方法就是第一次与Web服务器的交流可以用xml来实现。客户端获取xml，然后解析，然后显示到某个组件里面，如C#的Listbox，这样点击这个组件就可以轻易的将视频地址传给播放器组件了。pplive的频道列表，估计就是用的这种方式。
1. 大体的架构及流程
实现视频点播系统，B/S架构，服务端至少应该是两个服务器：流媒体服务器，web服务器。客户端则就是web页面。当开启页面后则是客户端和服务器的第一次交互，通过http协议得到页面。里面会有流媒体地址的信息，浏览器里面点击显示视频组件，将流媒体的地址传给流媒体播放器，并启动播放器去请求视频。这是第二次交互。服务器端流媒体服务器发送流给客户端，页面上播放就okay了。
2. 环境及所需软件
Jeremiah的测试环境是xp sp2及IE8浏览器。IP地址：172.16.128.8. 与IP有关的地址，请根据个人情况自己改。
服务端：
流媒体服务器先用个简单的：live555 Media Server(http://www.live555.com/mediaServer/windows/live555MediaServer.exe)
Web服务器：Jeremiah以前学的JAVA，所以用Tomcat。IIS或者其他的Web服务器都可以。其实Jeremiah这个小系统用的是静态页面，所以如果是在本机测试的话，不用Web服务器也是okay的。模拟本地打开为Web浏览。
客户端：vlc-0.9.4的Activex。需要把Activex注册好（参考/article/4430496.html）
3. 配置流媒体服务器
下载完live555 Media Server之后放到d:/video下面，启动时会有以下信息：
"Play streams from this server using the URL
rtsp://172.16.128.8/<filename>
where <filename> is a file present in the current directory."
并且后面还会有live555支持的视频格式。本测试就用的mp3和ts格式。其他格式没有试验过。
mp3好说，ts怎么得到呢？这时候vlc就出场了。vlc有转换保存功能，媒体->转换/保存->选择某个文件后点击转换/保存->流输出页面勾选本地播放，勾选文件并且浏览得到个文件名，注意后缀为ts而不是ps，方案封装选MPEG-TS，然后点击save。把你选择的视频播放一遍之后，ts格式的文件就生成好了。
将生成好的ts文件和网上下载的mp3放到d:/video下面，本测试为01.ts及02.mp3。这样流媒体服务器就配置好了。
4. web页面代码
本web页面代码是vlc的Activex测试代码test.html上修改精简的。(没写注释，因为看着不难。)
vod.html：
<!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" >
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<script>
var itemId = 0;
function getVLC(name)
{
if (window.document[name])
{
return window.document[name];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[name])
return document.embeds[name];
}
else
{
return document.getElementById(name);
}
}
function doGo(mrl)
{
var vlc = getVLC("vlc");
itemId=vlc.playlist.add(mrl);
vlc.playlist.playItem(itemId);
document.getElementById("btn_stop").disabled = false;
}
function updateVolume(deltaVol)
{
var vlc = getVLC("vlc");
vlc.audio.volume += deltaVol;
}
function doPlay()
{
vlc.playlist.playItem(itemId);
document.getElementById("btn_stop").disabled = false;
document.getElementById("btn_play").disabled = true;
}
function doStop()
{
getVLC("vlc").playlist.stop();
document.getElementById("btn_stop").disabled = true;
document.getElementById("btn_play").disabled = false;
}
</script>
</head>
<body>
<div style="margin: 50px">
<a title="rtsp://172.16.128.8/01.ts" href="#" onclick="doGo(this.title);return
false;">01.ts</a>
<span style="margin:
20px;" />
<a title="rtsp://172.16.128.8/02.mp3" href="#" onclick="doGo(this.title);return
false;">02.mp3</a>
<span style="margin:
20px;" />
</div>
<div>
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="640"
height="480"
id="vlc"
events="true">
<param name="mrl" value="" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="false" />
<param name="autoplay" value="false" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage="http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="640"
height="480"
name="vlc">
</embed>
</object>
</div>
<div>
<input type=button id="btn_play" value="
播放 " onClick='doPlay();' disabled="true">
<input type=button id="btn_stop" value="停止" onClick='doStop();' disabled="true">
<input type=button value="静音切换" onclick='getVLC("vlc").audio.togglemute();'>
<input type=button value="减小音量" onclick='updateVolume(-10)'>
<input type=button value="增加音量" onclick='updateVolume(+10)'>
</div>
</body>
</html>
将vod.html放置到Web服务器中。我就不多说了。so简单。
5. 访问vod.html
访问前请确保客户端Activex控件已注册成功。
打开IE输入http://172.16.128.8:8080/vod/vod.html后访问到我们上面写的页面。然后点击01.ts超链接，在下面的vlc的Activex上就会显示视频了。这样，一个简单的点播系统就做好了。
请注意下面图片的视频上的地址。
6. C/S架构的实现
做成跟pplive类似的客户端，考虑与服务器的两次交流，第二次交流是没有问题的，关键在第一次交流上。如果客户端做成嵌入IE的方式，如C#的WebBrowser，则点击某个视频地址的信息模块，如超链接，无法将超链接的地址传给播放器组件了。Jeremiah考虑的解决的方法就是第一次与Web服务器的交流可以用xml来实现。客户端获取xml，然后解析，然后显示到某个组件里面，如C#的Listbox，这样点击这个组件就可以轻易的将视频地址传给播放器组件了。pplive的频道列表，估计就是用的这种方式。
1. 大体的架构及流程
实现视频点播系统，B/S架构，服务端至少应该是两个服务器：流媒体服务器，web服务器。客户端则就是web页面。当开启页面后则是客户端和服务器的第一次交互，通过http协议得到页面。里面会有流媒体地址的信息，浏览器里面点击显示视频组件，将流媒体的地址传给流媒体播放器，并启动播放器去请求视频。这是第二次交互。服务器端流媒体服务器发送流给客户端，页面上播放就okay了。
2. 环境及所需软件
Jeremiah的测试环境是xp sp2及IE8浏览器。IP地址：172.16.128.8. 与IP有关的地址，请根据个人情况自己改。
服务端：
流媒体服务器先用个简单的：live555 Media Server(http://www.live555.com/mediaServer/windows/live555MediaServer.exe)
Web服务器：Jeremiah以前学的JAVA，所以用Tomcat。IIS或者其他的Web服务器都可以。其实Jeremiah这个小系统用的是静态页面，所以如果是在本机测试的话，不用Web服务器也是okay的。模拟本地打开为Web浏览。
客户端：vlc-0.9.4的Activex。需要把Activex注册好（参考/article/4430496.html）
3. 配置流媒体服务器
下载完live555 Media Server之后放到d:/video下面，启动时会有以下信息：
"Play streams from this server using the URL
rtsp://172.16.128.8/<filename>
where <filename> is a file present in the current directory."
并且后面还会有live555支持的视频格式。本测试就用的mp3和ts格式。其他格式没有试验过。
mp3好说，ts怎么得到呢？这时候vlc就出场了。vlc有转换保存功能，媒体->转换/保存->选择某个文件后点击转换/保存->流输出页面勾选本地播放，勾选文件并且浏览得到个文件名，注意后缀为ts而不是ps，方案封装选MPEG-TS，然后点击save。把你选择的视频播放一遍之后，ts格式的文件就生成好了。
将生成好的ts文件和网上下载的mp3放到d:/video下面，本测试为01.ts及02.mp3。这样流媒体服务器就配置好了。
4. web页面代码
本web页面代码是vlc的Activex测试代码test.html上修改精简的。(没写注释，因为看着不难。)
vod.html：
<!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" >
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<script>
var itemId = 0;
function getVLC(name)
{
if (window.document[name])
{
return window.document[name];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[name])
return document.embeds[name];
}
else
{
return document.getElementById(name);
}
}
function doGo(mrl)
{
var vlc = getVLC("vlc");
itemId=vlc.playlist.add(mrl);
vlc.playlist.playItem(itemId);
document.getElementById("btn_stop").disabled = false;
}
function updateVolume(deltaVol)
{
var vlc = getVLC("vlc");
vlc.audio.volume += deltaVol;
}
function doPlay()
{
vlc.playlist.playItem(itemId);
document.getElementById("btn_stop").disabled = false;
document.getElementById("btn_play").disabled = true;
}
function doStop()
{
getVLC("vlc").playlist.stop();
document.getElementById("btn_stop").disabled = true;
document.getElementById("btn_play").disabled = false;
}
</script>
</head>
<body>
<div style="margin: 50px">
<a title="rtsp://172.16.128.8/01.ts" href="#" onclick="doGo(this.title);return
false;">01.ts</a>
<span style="margin:
20px;" />
<a title="rtsp://172.16.128.8/02.mp3" href="#" onclick="doGo(this.title);return
false;">02.mp3</a>
<span style="margin:
20px;" />
</div>
<div>
<object classid="clsid:9be31822-fdad-461b-ad51-be1d1c159921"
width="640"
height="480"
id="vlc"
events="true">
<param name="mrl" value="" />
<param name="showdisplay" value="true" />
<param name="autoloop" value="false" />
<param name="autoplay" value="false" />
<param name="volume" value="50" />
<param name="starttime" value="0" />
<embed pluginspage="http://www.videolan.org"
type="application/x-vlc-plugin"
version="videolan.vlcplugin.2"
width="640"
height="480"
name="vlc">
</embed>
</object>
</div>
<div>
<input type=button id="btn_play" value="
播放 " onClick='doPlay();' disabled="true">
<input type=button id="btn_stop" value="停止" onClick='doStop();' disabled="true">
<input type=button value="静音切换" onclick='getVLC("vlc").audio.togglemute();'>
<input type=button value="减小音量" onclick='updateVolume(-10)'>
<input type=button value="增加音量" onclick='updateVolume(+10)'>
</div>
</body>
</html>
将vod.html放置到Web服务器中。我就不多说了。so简单。
5. 访问vod.html
访问前请确保客户端Activex控件已注册成功。
打开IE输入http://172.16.128.8:8080/vod/vod.html后访问到我们上面写的页面。然后点击01.ts超链接，在下面的vlc的Activex上就会显示视频了。这样，一个简单的点播系统就做好了。
请注意下面图片的视频上的地址。
6. C/S架构的实现
做成跟pplive类似的客户端，考虑与服务器的两次交流，第二次交流是没有问题的，关键在第一次交流上。如果客户端做成嵌入IE的方式，如C#的WebBrowser，则点击某个视频地址的信息模块，如超链接，无法将超链接的地址传给播放器组件了。Jeremiah考虑的解决的方法就是第一次与Web服务器的交流可以用xml来实现。客户端获取xml，然后解析，然后显示到某个组件里面，如C#的Listbox，这样点击这个组件就可以轻易的将视频地址传给播放器组件了。pplive的频道列表，估计就是用的这种方式。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vlc的应用之六：简单的视频点播系统(B/S)的实现
- vlc的应用之六：简单的视频点播系统(B/S)的实现
- vlc的应用之六：简单的视频点播系统(B/S)的实现
- vlc的应用之六：简单的视频点播系统(B/S)的实现
- vlc的应用之六：简单的视频点播系统(B/S)的实现
- 利用live555 Media Server和VLC Active ocx实现简单的流媒体点播系统(B/S)
- 简单的视频点播系统(B/S)的实现
- 利用live555 Media Server和VLC Active ocx实现简单的流媒体点播系统(B/S)
- 设计并实现同时支持多种视频格式的流媒体点播系统
- VIEWGOOD(远古)视频点播的系统的应用
- 设计并实现同时支持多种视频格式的流媒体点播系统
- Linux即时通讯应用系统的音视频功能实现 音视频SDK
- 设计并实现同时支持多种视频格式的流媒体点播系统
- 如何实现一个c/s模式的flv视频点播系统
- 收藏：视频网站（JavaEE+FFmpeg）/Nginx+ffmpeg实现流媒体直播点播系统
- win8应用简单实现视频播放
- C# 系统应用之ListView实现简单图片浏览器
- 如何实现一个c/s模式的flv视频点播系统
- 单链表的应用：用C语言实现简单的员工管理系统(新建、增、删、改、查、排序)
- 用jsp实现一个简单的购物车web应用系统。实现的添加购物商品，删除购物商品并且显示购物车信息。