Flowplayer is not autobuffering but loading whole video - flowplayer

I am using flowplayer to play flash video. I've set autobuffering to true but it is still loading the whole video before playing. I've also tried setting bufferlength: 2, but no better. When using HTML5 (code not shown), it works correctly. Any ideas? Looks like JWPlayer does the same thing - although it at least shows that something is happening. Is this an issue with Flash that the swf has to process the whole file first?
<object id="flowplayer" width="640" height="360"
data="./flowplayer/flowplayer-3.2.16.swf"
type="application/x-shockwave-flash">
<param name="movie" value="./flowplayer/flowplayer-3.2.16.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "./videos/<? echo $video ?>.mp4", "autoPlay":true, "autoBuffering":true}}' />
</object>

Related

Smooth Streaming Codec Private Data

When I add a new SSF_STREAM_INFO into the SSF SDK muxer, the header data that is produced doesn't seem to contain a proper value for CodecPrivateData param.
<param name="CodecPrivateData" value="0000000100000001" valuetype="data" />
I am under the impression that this information is used by a smooth streaming player, to decode individual frames. See, when I play back my live stream from my encoder I get a blank frames in my video feed.
If CodecPrivateData is supposed to contain information on decoding frames, how do I properly set it and with what data? Pretty sure that belongs in the MPEG2VIDEOINFO struct (that I use for the stream info's pTypeSpecificInfo field).
Below is more of the header information that the muxer produces. Does any one have any experience with this? Some pointers would be helpful!
`<?xml version="1.0" encoding="utf-8"?>
<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
<head></head>
<body>
<switch>
<video src="Streams" systemBitrate="500000">
<param name="trackID" value="1" valuetype="data" />
<param name="FourCC" value="AVC1" valueType="data" />
<param name="MaxWidth" value="320" valueType="data" />
<param name="MaxHeight" value="240" valueType="data" />
<param name="CodecPrivateData" value="0000000100000001" valuetype="data" />
</video>
</switch>
</body>
</smil>`
My encoder is encoding a live h.264 video feed into the SSF muxer. So I used an MPEG2VIDEOINFO struct for my pTypeSpecificInfo.
The codec private data for AVC1 is supposed to be
NAL_START_CODE SPS NAL_START_CODE PPS
where
NAL_START_CODE is the byte sequence 00,00,00,01
SPS is Sequence Parameter Set, and
PPS is Picture Parameter Set
Source: https://msdn.microsoft.com/en-us/library/ff728116%28v=vs.95%29.aspx

mpeg dash on wowza server not working, status error 404 Not Found

adaptives links for mpeg dash on wowza server not working with me, the following are the steps that I used to publish video on wowza:
I install and configure Wowza server, and I tested it and it is working fine.
Transcode this video using ffmepg (I bring these command from wowza documentation)
I test the files and all of them workig fine then I moved these files to wowza content folder and create the smil file as following:
<?xml version="1.0" encoding="UTF-8"?>
<smil title="sintel">
<body>
<switch>
<video width="320" height="180" src="sintel_320p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="200000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="640" height="360" src="sintel_640p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="520000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="320" height="180" src="sintel_400p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="270000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="420" height="270" src="sintel_700p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="570000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="720" height="406" src="sintel_1100p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="1000000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="1024" height="576" src="sintel_1300p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="1200000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
<video width="1080" height="608" src="sintel_1500p.mp4" systemLanguage="eng" >
<param name="videoBitrate" value="1400000" valuetype="data"></param>
<param name="audioBitrate" value="44100" valuetype="data"></param>
</video>
</switch>
</body>
</smil>
I use the mpd file (http://191.237.26.137:1935/vod/smil:sintel.smil/manifest.mpd) with http://www.jwplayer.com/innovation/roadmap/mpeg-dash/
Result: the video work for first few seconds the stop
It looks like from your description that there is keyframe alignment problem between the files. For switching to occur smoothly, each rendition must be key frame aligned meaning that a key frame that occurs at a specific timecode in one file must also occur at the same timecode in all of the other files. The default option with Dash is to request video segments are created and named based on the keyframe timecodes. If the player switches to a rendition that doesn't have a specific segment that is requested (because its key frame timing is off) then it will fail with a 404 response.
Wowza server builds the HTTP manifests dynamically from the moov atom data in the media files. In the case with an Adaptive bitrate manifest, it only reads the data from the first file and expects that the data will be identical in the other files. The default file plays fine because that was the one that the data came from and individual files play fine because fresh data is extracted from the file when each file is requested.
Id based segmentation (where the segments contain multiple key frames and are numbered sequentially, such as is used with HLS or HDS) is less susceptible to alignment problems however, you may notice the stream jumping forward or backwards if it switches to a different rendition and the timecodes in the new chunk don't align with the old chunk. Mpeg Dash can be configured to use ID based segmentation by changing the manifest url. See Delivery Formats for details.
Ffmpeg may do a better job at creating aligned encodings by disabling scene detection or doing two pass encoding and using the same first pass log for each second pass.

Can VideoJs display subtitles in chinese?

I just started using VideoJS. Quite impressed with the ease of initial setup of the Javascript library and the clean integration of videos into web pages.
However I encountered an issue of displaying subtitles in a foreign language (e.g. Chinese). The following is the code for embedding video
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640"
height="264" poster="Image/oceans-clip.png" data-setup="{}">
<source src="Video/oceans.mp4" type='video/mp4'/>
<track kind="captions" src="video-js/demo.captions_C.vtt" srclang="zh" label="Chinese" default></track>
<track kind="captions" src="video-js/demo.captions.vtt" srclang="en" label="English"></track>
<!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="video-js/demo.captions_C.vtt" srclang="zh" label="Chinese" default></track>
<track kind="subtitles" src="video-js/demo.captions.vtt" srclang="en" label="English"></track>
<!-- Tracks need an ending tag thanks to IE9 -->
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
The issues I have are:
1) The Chinese captions in "demo.captions_C.vtt" are not displayed, even if it is set as default. Instead, captions in "demo.captions.vtt is " are displayed.
2) I tried to select "Chinese" in the caption menu. There was no response and no change.
The "demo.captions_C.vtt" is provided below:
WEBVTT
00:00.000 --> 00:02.332
这是中文字幕
00:02.332 --> 00:10.947
海鸥的英雄礼赞音乐
00:10.947 --> 00:17.691
大海在咆哮
00:17.691 --> 00:50.279
鲸鱼在召唤
The only difference (apart from contents) I can tell between demo.captions.vtt and demo.captions_C.vtt is that the latter uses utf8 encoding, while the first one is using us-ascii.
I am wondering (a) if I have missed anything in the html code in integrating with the video tag in configuring tracks. Why only English is displayed. (b) has anyone successfully used vtt file that is using UTF-8 encoding? please let me know your procedures.
Here is a working example with Chinese subtitles:
https://jsfiddle.net/xrpnbwfz/1/
<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" data-setup='[]'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' default />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
</video>
If you are using the latest version 4.12, there are some known issues with captions/subtitles: https://github.com/videojs/video.js/issues/1888 https://github.com/videojs/video.js/issues/1904
https://github.com/videojs/video.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+caption

Firefox and HTML5 video element – weird behaviour with flash fallback. Possible bugs in mediaelemnts.js

I'm working on embedding video to a web-page and am using mediaelements.js. I used following code from the mediaelements.js examples:
<video width="640" height="360" id="player2" poster="img/echo-hereweare.jpg" controls="controls" preload="none">
<source type="video/mp4" src="somevideo.mp4" />
<source type="video/webm" src="somevideo.webm" />
<source type="video/ogg" src="somevideo.ogv" />
<object width="640" height="360" type="application/x-shockwave-flash" data="flash/flashmediaelement.swf">
<param name="movie" value="flash/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=somevideo.mp4" />
<img src="img/echo-hereweare.jpg" width="640" height="360" alt="Here we are"
title="No video playback capabilities" />
</object>
</video>
Then later on comes the script-code from the example:
<script>
$('audio,video').mediaelementplayer({
success: function(player, node) {
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
}
});
</script>
Then I discovered some strange thing in Firefox. When I'm using this code without starting mediaelements.js (not using the script above), firefox tries to play the .mp4, but naturally the console reports an error that the .mp4 format is not supported. So far so right.
In my understanding, the video element should now try the next format – .webm. Instead the flash fallback gets loaded (flashmediaelement.swf) (nothing gets played so far, as the play-button is not clicked yet, but still the .swf is loaded completely).
Then when I play the video the .webm gets downloaded and played – as expected.
When I use it with mediaelements.js an even weirder thing is happening – the .swf not only gets fully loaded once, but is requested at least one more time, without being downloaded (you see it in firebug's network tab – a yellow line with a busy spinner, as if it would load and load. But there is no error or any status code, nor a filesize displayed. It seems kind of like an "stuck" request. I would like to post a screenshot of it, but am not allowed at the moment.).
Additionaly I get the alert in Firebug's console, that the .webm cannot be decoded. The .webm-video starts loading but won't be loaded fully (status code 206). Then no video plays at all, because the .webm is tried to play but stops because of the decoding error. Shoudn't the flash fallback jump in then?
My questions are now:
Is this normal behaviour in Firefox for media elements – that the
fallback flashplayer gets loaded, even though it is not needed?
Why does it load two or three times in the second scenario
allthough it is not used either? I guess this is a bug in mediaelemnts.js
And third, why does firefox play the .webm without mediaelements.js
and doesn't with mediaelements.js? I guess another bug?
Thx for any help.
---NOTE---
I know I am using the .swf that comes with the mediaelements.js as a fallback solution, even when I am not using mediaelements.js. Does anyone know a simple lightweight flash video player? Or would I have to stick with flowplayer as the standard flash video player?
I can't have multiple versions of all my video files (there's lots and the whole site is downloaded) so I wrote this and it seems to work on current Safari, FireFox and Chrome -should work on everything else or add to the non MP4 list
<script type="text/javascript">
/*U might need to add other non-MP4 native browsers*/
if (navigator.userAgent.indexOf('Firefox'||'Chrome') != -1) {
document.write("<object type='application/x-shockwave-flash' data='player.swf' width='480' height='270'>
<param name='movie' value='player.swf' />
<param name='allowFullScreen' value='true'/>
<param name='wmode' value='transparent' />
<param name='flashVars' value='controlbar=over&file=video/sequence03.mp4' />
<span title='No video playback capabilities, please download the video below'>
<a href='video/sequence03.mp4'>Sequence 03</a></span></object>")
}
else {
document.write("<video width='480' height='270' controls><source src='video/sequence03.mp4' type='video/mp4' /></video>")
}
</script>

Embedding Windows Media Player for all browsers

Edit: This question was written in 2008, which was like 3 internet ages ago. If this question is still relevant to your environment, please accept my condolences. Everyone else should convert into a format supported by your browsers (That would be H.264 if Internet Explorer is needed, and probably AV1, VP8/VP9 if not) and use the <video> element.
We are using WMV videos on an internal site, and we are embedding them into web sites. This works quite well on Internet Explorer, but not on Firefox. I've found ways to make it work in Firefox, but then it stops working in Internet Explorer.
We do not want to use Silverlight just yet, especially since we cannot be sure that all clients will be running Windows XP with Windows Media Player installed.
Is there some sort of Universal Code that embeds WMP into both Internet Explorer and Firefox, or do we need to implement some user-agent-detection and deliver different HTML for different browsers?
The following works for me in Firefox and Internet Explorer:
<object id="mediaplayer" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#version=5,1,52,701" standby="loading microsoft windows media player components..." type="application/x-oleobject" width="320" height="310">
<param name="filename" value="./test.wmv">
<param name="animationatstart" value="true">
<param name="transparentatstart" value="true">
<param name="autostart" value="true">
<param name="showcontrols" value="true">
<param name="ShowStatusBar" value="true">
<param name="windowlessvideo" value="true">
<embed src="./test.wmv" autostart="true" showcontrols="true" showstatusbar="1" bgcolor="white" width="320" height="310">
</object>
May I suggest the jQuery Media Plugin? Provides embed code for all kinds of video, not just WMV and does browser detection, keeping all that messy switch/case statements out of your templates.
Use the following. It works in Firefox and Internet Explorer.
<object id="MediaPlayer1" width="690" height="500" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject"
>
<param name="FileName" value='<%= GetSource() %>' />
<param name="AutoStart" value="True" />
<param name="DefaultFrame" value="mainFrame" />
<param name="ShowStatusBar" value="0" />
<param name="ShowPositionControls" value="0" />
<param name="showcontrols" value="0" />
<param name="ShowAudioControls" value="0" />
<param name="ShowTracker" value="0" />
<param name="EnablePositionControls" value="0" />
<!-- BEGIN PLUG-IN HTML FOR FIREFOX-->
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
src='<%= GetSource() %>' align="middle" width="600" height="500" defaultframe="rightFrame"
id="MediaPlayer2" />
And in JavaScript,
function playVideo() {
try{
if(-1 != navigator.userAgent.indexOf("MSIE"))
{
var obj = document.getElementById("MediaPlayer1");
obj.Play();
}
else
{
var player = document.getElementById("MediaPlayer2");
player.controls.play();
}
}
catch(error) {
alert(error)
}
}
Elizabeth Castro has an interesting article on this problem: Bye Bye Embed. Worth a read on how she attacked this problem, as well as handling QuickTime content.
You could use conditional comments to get IE and Firefox to do different things
<![if !IE]>
<p> Firefox only code</p>
<![endif]>
<!--[if IE]>
<p>Internet Explorer only code</p>
<![endif]-->
The browsers themselves will ignore code that isn't meant for them to read.
The best way to deploy video on the web is using Flash - it's much easier to embed cleanly into a web page and will play on more or less any browser and platform combination. The only reason to use Windows Media Player is if you're streaming content and you need extraordinarily strong digital rights management, and even then providers are now starting to use Flash even for these. See BBC's iPlayer for a superb example.
I would suggest that you switch to Flash even for internal use. You never know who is going to need to access it in the future, and this will give you the best possible future compatibility.
EDIT - March 20 2013.
Interesting how these old questions resurface from time to time! How different the world is today and how dated this all seems. I would not recommend a Flash only route today by any means - best practice these days would probably be to use HTML 5 to embed H264 encoded video, with a Flash fallback as described here: http://diveintohtml5.info/video.html
Encoding flash video is actually very easy with ffmpeg. You can use one command to convert from just about any video format, ffmpeg is smart enough to figure the rest out, and it'll use every processor on your machine. Invoking it is easy:
ffmpeg -i input.avi output.flv
ffmpeg will guess at the bitrate you want, but if you'd like to specify one, you can use the -b option, so -b 500000 is 500kbps for example. There's a ton of options of course, but I generally get good results without much tinkering. This is a good place to start if you're looking for more options: video options.
You don't need a special web server to show flash video. I've done just fine by simply pushing .flv files up to a standard web server, and linking to them with a good swf player, like flowplayer.
WMVs are fine if you can be sure that all of your users will always use [a recent, up to date version of] Windows only, but even then, Flash is often a better fit for the web. The player is even extremely skinnable and can be controlled with javascript.
I found a good article about using the WMP with Firefox on MSDN.
Based on MSDN's article and after doing some trials and errors, I found using JavaScript is better than using conditional comments or nested "EMBED/OBJECT" tags.
I made a JS function that generate WMP object based on given arguments:
<script type="text/javascript">
function generateWindowsMediaPlayer(
holderId, // String
height, // Number
width, // Number
videoUrl // String
// you can declare more arguments for more flexibility
) {
var holder = document.getElementById(holderId);
var player = '<object ';
player += 'height="' + height.toString() + '" ';
player += 'width="' + width.toString() + '" ';
videoUrl = encodeURI(videoUrl); // Encode for special characters
if (navigator.userAgent.indexOf("MSIE") < 0) {
// Chrome, Firefox, Opera, Safari
//player += 'type="application/x-ms-wmp" '; //Old Edition
player += 'type="video/x-ms-wmp" '; //New Edition, suggested by MNRSullivan (Read Comments)
player += 'data="' + videoUrl + '" >';
}
else {
// Internet Explorer
player += 'classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" >';
player += '<param name="url" value="' + videoUrl + '" />';
}
player += '<param name="autoStart" value="false" />';
player += '<param name="playCount" value="1" />';
player += '</object>';
holder.innerHTML = player;
}
</script>
Then I used that function by writing some markups and inline JS like these:
<div id='wmpHolder'></div>
<script type="text/javascript">
window.addEventListener('load', generateWindowsMediaPlayer('wmpHolder', 240, 320, 'http://mysite.com/path/video.ext'));
</script>
You can use jQuery.ready instead of window load event to making the codes more backward-compatible and cross-browser.
I tested the codes over IE 9-10, Chrome 27, Firefox 21, Opera 12 and Safari 5, on Windows 7/8.
I have found something that Actually works in both FireFox and IE, on Elizabeth Castro's site (thanks to the link on this site) - I have tried all other versions here, but could not make them work in both the browsers
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
id="player" width="320" height="260">
<param name="url"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="showcontrols" value="true" />
<param name="autostart" value="true" />
<!--[if !IE]>-->
<object type="video/x-ms-wmv"
data="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv"
width="320" height="260">
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/fishstore.wmv" />
<param name="autostart" value="true" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object>
Check her site out: http://www.alistapart.com/articles/byebyeembed/ and the version with the classid in the initial object tag
December 2020 :
We have now Firefox 83.0 and Chrome 87.0
Internet Explorer is dead, it has been replaced by the new Chromium-based Edge 87.0
Silverlight is dead
Windows XP is dead
WMV is not a standard : https://www.w3schools.com/html/html_media.asp
To answer the question :
You have to convert your WMV file to another format : MP4, WebM or Ogg video.
Then embed it in your page with the HTML 5 <video> element.
I think this question should be closed.

Resources