Question

我在配置以下情况时遇到问题：我的客户希望将他的监控摄像机嵌入到网站中。任何设备和浏览器都可以访问网页和直播，而无需使用插件。

我试过跟随wowza：

Incoming Stream is: rtsp://172.17.27.62/media/video1 (Sony Ipela CH140)
Transcoding: Transrate (Default)

source  mp4:${SourceStreamName}_source  
720p    mp4:${SourceStreamName}_720p    
360p    mp4:${SourceStreamName}_360p    
240p    mp4:${SourceStreamName}_240p    
160p    mp4:${SourceStreamName}_160p

我可以在wowza测试玩家中毫无问题地观看视频流。我看到他们正在观看Flash播放器。

我尝试在我的本地xampp（apache）上嵌入带有以下html5代码的转码流：

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="http://localhost:1935/Surveillance/ngrp:test.stream_all/manifest.f4m" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="http://localhost:1935/Surveillance/ngrp:test.stream_all/playlist.m3u8" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="http://localhost:1935/Surveillance/ngrp:test.stream_all/Manifest" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div> 

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="http://localhost:1935/Surveillance/ngrp:test.stream_all/manifest.mpd" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div> 

<script> 
var myVideo = document.getElementById("video1"); 

function playPause() { 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
} 

function makeBig() { 
    myVideo.width = 560; 
} 

function makeSmall() { 
    myVideo.width = 320; 
} 

function makeNormal() { 
    myVideo.width = 420; 
} 
</script> 
</body> 
</html>

它们都不适用于最新的Chrome浏览器。我可以将wowza转码配置为mp4 supported format in html5吗？接下来的目标是什么？

关心Mathias

Answer 1

所有浏览器和设备的HTML5都不支持Wowza输出格式。请参阅：Wowza Blog - A Note on HTML5

他们建议使用JWPlayer，它为所有浏览器提供后备。请注意，桌面上的HLS仅在Premium播放器中可用。见JWPlayer - Using HLS Streaming

Wowza - How to use JWPlayer with the Wowza Streaming Engine 按照support forum上的建议。

你的type错了。示例：HLS具有type="application/x-mpegURL"等等。

IP Cam（RTSP）流转码与wowza并嵌入在网站中

1 个答案: