HTML5直播
对于学校，我需要建立一个HTML5现场直播网站。他们有一个闪存播放器，他们一直在使用，但现在他们希望它使用HTML5。我该怎么做？我试着用那个视频标签，但没能用。下面是我的代码。有人能给我指明正确的方向吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Deltion Live Streaming</title>
<script language="javascript" type="text/javascript" src="../swfobject.js"></script>
</head>
<body>
<video id="movie" width="460" height="306" preload autoplay>
<source src="rtmp://fl2.sz.xlcdn.com:80/sz=Deltion_College=lb1" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- HERE THE CODE FOR THE ALTERNATIVE PLAYER (FLASH) WILL BE! -->
</video>
</body>
</html>回答 8
Stack Overflow用户
发布于 2013-02-12 15:33:52
这方面的一个可能的替代办法是：
- 使用编码器(例如VLC或FFmpeg)将输入流打包为OGG格式。例如，在本例中，我使用VLC将屏幕捕获设备打包为以下代码： C：\ Files\VideoLAN\VLC\vlc.exe -I虚拟屏幕://:屏幕-fps=16.000000:屏幕缓存=100 :sout=#transcode{vcodec=theo，vb=800，scale=1，width=600，height=480，acodec=mp3}:http{mux=ogg，dst=127.0.0.1:8080/桌面.rtp} :no-sout-rtp-sap :no-sout-标准-sap :ttl=1 :sout-
- 将这些代码嵌入到HTML页面中的
<video>标记中，如下所示：<video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay" />
这应该能起作用。但是，它的性能很差，而且AFAIK MP4容器类型在浏览器中应该比OGG有更好的支持。
Stack Overflow用户
发布于 2016-09-28 14:12:39
通过使用媒体源扩展( HTML5 )--相对较新的W3C标准：https://www.w3.org/TR/media-source/ MSE是HTML5 <video>标记的扩展；网页上的javascript可以从服务器获取音频/视频片段，并将其推送到MSE以供播放。抓取机制可以通过HTTP请求(MPEG-破折号)或通过WebSockets完成。截至2016年9月，所有设备上的所有主要浏览器都支持MSE。iOS是唯一的例外。
对于高延迟(5+秒)的HTML5实时视频流，您可以考虑video.js或Wowza流引擎的MPEG-破折号实现。
为了降低延迟，接近实时的HTML5实时视频流，请查看EvoStream媒体服务器、非真实媒体服务器和WebRTC。
Stack Overflow用户
发布于 2017-07-08 14:39:37
首先，您需要设置一个媒体流服务器。您可以使用Wowza、red5或nginx-rtmp-模块。在你想要的操作系统上阅读他们的文档和设置。所有的引擎都支持HLS (由苹果公司开发的协议)。您应该阅读配置文档。nginx模块示例：
rtmp {
server {
listen 1935; # Listen on standard RTMP port
chunk_size 4000;
application show {
live on;
# Turn on HLS
hls on;
hls_path /mnt/hls/;
hls_fragment 3;
hls_playlist_length 60;
# disable consuming the stream from nginx as rtmp
deny play all;
}
}
}
server {
listen 8080;
location /hls {
# Disable cache
add_header Cache-Control no-cache;
# CORS setup
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
add_header 'Access-Control-Allow-Headers' 'Range';
# allow CORS preflight requests
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /mnt/;
}
}在服务器安装和配置成功之后。你必须使用一些rtmp编码器软件(OBS，wirecast .)比如youtube或者twitchtv。
在客户端(在您的情况下是浏览器)，您可以使用视频或JWplayer为最终用户播放视频。您可以在下面的视频中这样做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Streaming</title>
<link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.8/video.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
<source src="http://localhost:8080/hls/stream.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('#player');
</script>
</body>
</html>您不需要添加像flash这样的其他插件(因为我们使用的是HLS而不是rtmp)。这个播放器可以很好地工作跨浏览器没有闪光灯。
https://stackoverflow.com/questions/5858936
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号