使用vlc将mp4流式传输到html浏览器

时间:2012-07-02 13:36:50

标签: video-streaming html5-video vlc

我在将网络摄像头图片(没有声音)流式传输到HTML页面时遇到问题。我使用最新的(v2.0.2 vlc for windows)进行流式传输,这是命令行:

"c:\Program Files (x86)\VideoLAN\VLC\vlc.exe" -I dummy  dshow:// --dshow-vdev="Logitech QuickCam Chat" --dshow-adev=none --dshow-caching=0 --sout=#transcode{vcodec=h264,vb=1024,channels=1,ab=128,samplerate=44100,width=320}:http{mux=ts,dst=:8080/webcam.mp4} 

当我在另一个vlc播放器(http://127.0.0.1:8080/webcam.mp4)中打开流时,我可以观看流,但是当我试图将其嵌入网页时,我什么都看不见!这是代码:

<!DOCTYPE html>
<html>
  <head>
    <title>Video Test</title>
  </head>
  <body>
    <video id="video" class="projekktor" autoplay="autoplay" width="300px" preload="metadata">  
      <source src="http://127.0.0.1:8080/webcam.mp4" />
            Your browser doesn't appear to support the HTML5 <code>&lt;video&gt;</code> element.  
    </video>
  </body>
</html>

我试图在浏览器中打开它,如:

file:///C:/videostreaming/video.html

我在chrome示例中看到的是,有网络流量,流正在下载,但没有显示。

4 个答案:

答案 0 :(得分:17)

您无法使用VLC通过http协议传输mp4

按照此链接查看输出方法/多路复用器矩阵 http://www.videolan.org/streaming-features.html

但是您可以尝试转码为ogg。

试试这个:

"c:\Program Files (x86)\VideoLAN\VLC\vlc.exe" \
-I dummy  dshow:// --dshow-vdev="Logitech QuickCam Chat" \
--dshow-adev=none --dshow-caching=0 \
--sout=#transcode{vcodec=theo,vb=1024,channels=1,ab=128,samplerate=44100,width=320}:http{dst=:8080/webcam.ogg}

并在您的html视频标记中:

<source src="http://127.0.0.1:8080/webcam.ogg"/>

答案 1 :(得分:3)

尝试添加视频类型(type =“video / mp4”):

<video width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
      <source src="movie.ogg" type="video/ogg" />
      Your browser does not support the video tag.
    </video>

答案 2 :(得分:1)

你告诉VLC以TS格式流mux=ts这是你的问题,你需要在mp4中进行多路复用

答案 3 :(得分:1)

对于实时流媒体,您应该使用以下内容

<video id="video" src="http://localhost:8181/stream" type="video/ogg; codecs=theora" autoplay="autoplay"/>

更多 这是a link

请注意:仅视频类型为“ ogg”!