I want to use the free HTML5-videoplayer Video.js in a project.
In general all of the functions are ok, but i have a problem.
For information: I am using VideoJS 4.3.
I have a problem with the flash fallback in IE7/8. The fallback is working, but when there isn't a controlbar. I think the controlbar is not just hiding, but it is not there. Only the time, the volumebar and the slider appeared. Another problem is, that the play button at the beginnen is not shown in the fallback. I've searched for this problem but the solutions don't work for me. I think it does not work, because the solutions were for older versions of video.js. What can I do so that the controlbar and the play button appears in the fallback?
Here my embedded code:
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="none" width="480" height="320" poster="media/spardabank.jpg"
data-setup="{}">
<source src="SpardaBankHD.mp4" type='video/mp4' />
<source src="SpardaBankHD.webm" type='video/webm' />
<source src="SpardaBankHD.ogv" type='video/ogg' />
</video>
In the head is this:
<!-- Chang URLs to wherever Video.js files will be hosted -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="video.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
Thanks for helping,
Wuz
Related
I'm trying to follow the GettingStarted instructions on https://github.com/googleads/videojs-ima to setup videojs with ima. But, am getting stuck on the part "In player.js, load the ads library"; nothing has been changed in the local player.js file so it still looks exactly the same as here https://github.com/videojs/video.js/blob/master/src/js/player.js.
Bellow is the current code I have, but when it's ran in IE11, the console reports a warning and two errors:
Warning: "VIDEOJS: WARN: videojs.plugin() is deprecated; use videojs.registerPlugin() instead" in video.js (489,5)
Error: "SCRIPT1002: Syntax error" in player.js (5,1)
Error: "CSS3120: No fonts available for #font-face rule" in video-js.css (12,7)
Any input very much appreciated.
Thank you.
<!DOCTYPE html>
<html>
<head>
<!-- Load dependent stylesheets. -->
<link rel="stylesheet" href="http://vjs.zencdn.net/6.2.0/video-js.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/5.0.2/videojs.ads.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-ima/0.6.0/videojs.ima.css" />
</head>
<body>
<video id="content_video" class="video-js vjs-default-skin"
controls preload="auto" width="440" height="260">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
</video>
<!-- Load dependent scripts -->
<script src="http://vjs.zencdn.net/6.2.0/video.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/5.0.2/videojs.ads.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-ima/0.6.0/videojs.ima.js"></script>
<script src="src/js/player.js"></script>
<script>
var player = videojs('content_video');
var options = {
id: 'content_video',
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=440x260&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator='
};
// This must be called before player.play() below.
player.ima(options);
player.ima.requestAds();
// On mobile devices, you must call initializeAdDisplayContainer as the result
// of a user action (e.g. button click). If you do not make this call, the SDK
// will make it for you, but not as the result of a user action. For more info
// see our examples, all of which are set up to work on mobile devices.
// player.ima.initializeAdDisplayContainer();
// This must be called after player.ima(...) above.
player.play();
</script>
</body>
</html>
I'm using video JS to embed a video, and using a javascript to call a function when the video is done playing.
The problem is that in ie8 and lower, it uses a flash fall back. Is there anyway to get the flash fallback to trigger some sort of 'on video ended' event?
Thanks!
Make sure you're using video.js's API rather than that of an HTML5 video element which may or may not be present. This works:
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://www.videojs.com/img/poster.jpg">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
<script>
//Forcing flash tech
videojs('MY_VIDEO_1',{"techOrder":["flash"]}).ready(function(){
this.on('ended', function(e){
alert('end');
})
});
</script>
Here is some code from the view:
<div class="flowplayer">
<video>
<source type="video/mp4" src="~/Content/Videos/HowItWorksRegistration1.mp4">
</video>
</div>
I get the error: "html5: Video file not found"
But if I link to a web url for a random .mp4 video, it works. Also, earlier in the view, I have images with the same relative path and that works. I've double checked the path and even tried to put the video in the same directory (with updated path), and that did not work.
Any help appreciated.
The first thing to check is can you browse to the video url and play it in the browser.
If you get a 404 it's because the path is wrong.
If it does not play it is because the browser does not support that video.
HTML5 wiki shows what video formats what browsers support.
Some Chrome versions have issues with playing MP4 content. Workaround: List a WEBM before the MP4 source and/or set preload="none" as video tag attribute.
you should add :
<link href="~/Scripts/Video2/flowplayer-5.4.6/skin/minimalist.css" rel="stylesheet" />
<link href="~/Scripts/Video2/x/demo.css" rel="stylesheet" />
<link href="~/Scripts/Video2/x/pygments.css" rel="stylesheet" />
<link href="~/Scripts/Video2/x/playlist.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/Video/jquery.min.js"></script>
<script src="~/Scripts/Video2/flowplayer-5.4.6/flowplayer.min.js"></script>
Then you should use this :
<div class="flowplayer" style="width: 450px; height: 260px" data-ratio="0.416" data-swf="//releases.flowplayer.org/5.4.6/flowplayer.swf">
<video style="width: 450px; height: 260px" src="~/Content/Videos/HowItWorksRegistration1.mp4"></video>
</div>
Help with set up instructions of video.js
I got limited help trying to set up this player:
http://www.videojs.com/docs/setup/
The link instructions are pretty short/(easy for someone more skilled than me), but I need some advice, please. The self-hosted instructions show this:
<link href="http://example.com/path/to/video-js.css" rel="stylesheet">
<script src="http://example.com/path/to/video.js"></script>
<script>
_V_.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>
The help I got added this code to appropriate file:
<link href="http://theurl.com/video-js/video-js.css" rel="stylesheet">
<script src="http://theurl.com/video-js/video-js.css"></script>
<script>
_V_.options.flash.swf = "http://theurl.com/video-js/video-js.swf"
</script>
<video id="mp4" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://theurl.com/uploads/" type='video/mp4' />
</video>
According to the very short instructions at http://www.videojs.com/docs/setup/
does this new added code look right?
It looks correct, though you'll want to make sure the src attribute of the source tag points to a specific video file that's already been uploaded to the web somewhere.
<source src="http://theurl.com/uploads/MY_VIDEO.mp4" type='video/mp4' />
I am evaluating video.js flash fallback capabilities for live streaming.
I can stream using either RTMP or Adobe HTTP Dynamic Streaming.
Hovewer, nonne of the options seems to be supported,
here is my demo set up
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://mysite.com:1935/live/android.stream/manifest.f4m" type="video/mp4" />
<source src="rtmp://mysite.com/live" type="video/mp4" />
<source src="http://mysite.com:1935/live/android.stream/playlist.m3u8" type='video/mp4' />
here is what I see in the firebug console
Specified "type" attribute of "video/mp4" is not supported. Load of media resource http://mysite.com:1935/live/android.stream/manifest.f4m failed.
Specified "type" attribute of "video/mp4" is not supported. Load of media resource rtmp://mysite.com/live failed.
I went through the source code of the video.js (both JavaScript and ActionScript) and couldn't find any support for manifest files.
That is a feature I would also like to see...
Rtmp is now supported in video.js an example can be seen by using there already packaged file or this:
<!DOCTYPE html>
<html>
<head>
<title>Video.js</title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" data-setup='{ "techOrder": ["flash"] }'>
<!-- Stream testing -->
<source src="rtmp://rtmp.jim.stream.vmmacdn.be/vmma-jim-rtmplive-live/jim" type='rtmp/mp4'>
</video>
<p>Source from: http://support.akamai.com/flash/</p>
</body>
</html>
Hope this helps anyone currently stuck I know this has been dead for awhile.