我正在运行fluent-ffmpeg sample来播放视频,效果很好。现在在合约中显示基于flashhe版本的流媒体视频,我现在正在使用html5版本的流媒体,但它说未找到视频文件。
app.get('/video2/abc', function(req, res) {
console.log('/video/:filename');
res.contentType('mp4');
var pathToMovie = 'public/flowplayer/470x250.mp4' ;
var proc = new ffmpeg({ source: pathToMovie, nolog: true })
.writeToStream(res, function(retcode, error){
if(error) console.error('error',error);
else console.log('file has been converted succesfully');
});
});
这是我的html模板。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"> </script>
<script src="http://releases.flowplayer.org/5.4.0/flowplayer.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://releases.flowplayer.org/5.4.0/skin/minimalist.css" />
<title>node-fluent-ffmpeg</title>
</head>
<body>
<script>
// global configuration (optional)
flowplayer.conf = {
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st",
swf: "http://releases.flowplayer.org/5.4.0/flowplayer.swf"
};
// force flash with query - only for testing, do not use this switch in production!
if (/flash/.test(location.search)) flowplayer.conf.engine = "flash";
// install player manually
$(function() {
$(".player").flowplayer({
// reverse fraction of video aspect ratio
// video dimensions: 470px / 250px
ratio: 25/47
});
});
</script>
<div class="flowplayer">
<video>
<source type="video/mp4" src="/video2/your_movie"/>
</video>
</div>
</body>
</html>
答案 0 :(得分:1)
我有类似的问题,决定使用video-js。这开箱即用。
在我的情况下,我使用jquery注入视频标记并动态加载视频。像这样:
//I append the video tag so I remove it if I already appended it before.
if($('#player').length) $('#player').remove();
$('body').append('<video id="player" class="video-js vjs-default-skin" controls preload="auto" width="100%" height="100%" poster="my_video_poster.png" data-setup="{}"> <source src="'+url+'" type="video/webm"></video>');
// Load the player dynamically. see: http://www.videojs.com/docs/setup/
_V_("player", {}, function(){});