I have this player:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video id="milokan" class="video-js vjs-default-skin" controls preload="auto" width="640" height="480" autoplay data-setup="{}">
<source src="play.php?file=<?php echo $code; ?>" type='video/mp4'>
</video>
AND play.php plays header("Content-Type: video/mp4");
This way there is no buffer, the player works but just when the whole file is done downloading.
How can I make it work and keep hiding the file I'm playing ?
Make sure you send the following headers in your response when serving up the video file:
Accept-Ranges: bytes
Content-Length: 22474866 // (example)
Content-Range: bytes 539490-23014355/23014356 // (example)
Content-Type: video/mp4 // (example)
And make sure that you can serve files starting at a certain byte offset if the client requests that. This is required for seeking to work in HTML5 video/audio.
Related
My Need
html5 video element loads both a video and a vtt file saved in a different domain.
The problem
vtt is not loaded and error Text track from origin has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute.
My investigation
I am aware that CORS needs to be used so vtt can be loaded in html5 successfully.
I have enabled CORS on server side for requests from any domain.
Some articles say adding crossorigin or crossorigin="anonymous" into ` element can do the job, but it doesn't work. Either the video is not loaded at all or different errors appear
I have put my code here below
<body>
<div class="container">
<video id="myvideo" controls preload="auto" width="640" height="264" autoplay>
<source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"></source>
<track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default>
</video>
</body>
Hopefully this helps the next person to stumble upon this SO question. I discovered that IE (10 and 11) does not support loading a cross-origin VTT file for a <track>, even if CORS is enabled. In order to add IE support for captions, I had to use a script like the one below.
This script downloads each VTT file via AJAX, creates a blob URL, and replaces each <track> src with its respective blob URL.
window.addEventListener("load", function() {
if (window.navigator.userAgent.indexOf("MSIE ") < 0 && window.navigator.userAgent.indexOf("Trident/") < 0) {
// Not IE, do nothing.
return;
}
var tracks = document.querySelectorAll("track")
for (var i = 0; i < tracks.length; i++) {
loadTrackWithAjax(tracks[i]);
}
});
function loadTrackWithAjax(track) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200 && this.responseText) {
// If VTT fetch succeeded, replace the src with a BLOB URL.
var blob = new Blob([this.responseText], { type: 'text/vtt' });
track.setAttribute("src", URL.createObjectURL(blob));
}
};
xhttp.open("GET", track.src, true);
xhttp.send();
}
<video controls preload width="600" height="337.5" autoplay crossorigin="anonymous">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4"></source>
<track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
</video>
I can confirm that the crossorigin=anonymous attribute on the video element does indeed load the text track as expected.
Give this code a shot:
<video id="myvideo" controls preload="auto" width="640" height="264" autoplay crossorigin="anonymous">
<source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"></source>
<track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default>
</video>
Finally, remember, you must use a web server to serve this HTML snipped - this cannot be done locally (ie. file//).
If you're familiar with node - install http-server, run with --cors and use ngrok.
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>
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
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.
I am developing a Typo3 site and have installed "html5videoplayer" extension. Then I added the videos in MP4, .ogg and webm format, as this should cover all the browsers and also iPhone/iPad. However, it worked on iPhone/iPAD, and also chrome, opera, firefox and IE, but just wont work on SAFARI!
Here is the html:
<div class="video-js-box ">
<video id="video_1" class="video-js " width="960" height="450" data-setup="{}" controls="" autoplay="" preload="auto" tabindex="0">
<source type="video/mp4" src="fileadmin/Videos/Canebio_Korr.mp4"></source>
<source type="video/webm" src="fileadmin/Videos/canebio_mobile.webm"></source>
<source type="video/ogg" src="fileadmin/Videos/Canebio_Korr.ogg"></source>
</video>
<p class="vjs-no-video"> </p>
</div>
Any suggestion, ideas will be highly appreciated. You can also view the site at http://tinyurl.com/c7gunen
Thank you
Did the server send the files with a correct mime type?
.htacces in the folder with the video files:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm