I am using Videojs version 7.6.6. It will not play a html5 video if the src is a blob URL. It will load the video time however, but will not play. I get this warning, and then it loads forever:
VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the only playlist.
This is the way my code runs:
<video id="my_video" class="video-js vjs-matrix vjs-default-skin vjs-big-play-centered" controls
preload="none" width="640" height="268" data-setup="{}"></video>
<script type="text/javascript" src="/js/video-766.min.js"></script>
<script>
fetch("https://server/hls/index.m3u8").then(result => result.blob())
.then(blob => {
var blobURL = URL.createObjectURL(blob);
var player = videojs("my_video");
player.src({ src: blobURL, type: "application/x-mpegURL" });
}
);
</script>
If I try it without a blob, just a regular URL to the index.m3u8 file, then it works. So this is a problem with the creation of the blob URL I think. This works, the video starts playing:
<video id="my_video" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
<source src="https://server/hls/index.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('my_video');
</script>
I have searched for this issue and found a lot, but none of it helps me. Am I creating the blob wrong?
The object URL that is generated for the blob will start with file:// protocol if I'm not wrong. Browsers doesn't let you load data with file:// URL. I ran into a similar problem so I created a simple server on my app which returns the requested file over https:// .
The reason why your index.m3u8 is running because it is served over https protocol
Related
I want to make a video file available via an ASP.NET Core web service.
If I use:
[HttpGet]
public IActionResult Get()
{
return File(#"videofile.avi", "video/webm");
}
And access the video with vlc media player or a webpage like that:
<html>
<body>
<video id="video" preload="auto" width="320" height="240" controls>
<source src="http://localhost:39589/mycontroller" type="video/webm"/>
</video>
</body>
</html>
It seems that the video starts only when the complete file is transferred. I want the video to be transferred asynchronously, so that the video starts although it is not complete transferred.
Background: the video is constructed on the fly and will be in unlimited length (it will show the current time, so video is generated realtime in memory and should be transferred to web page every x frames). The goal is a webpage with a video which shows the current time live and infinite.
Edit: I got it working, I use a PushStreamContent object now.
When I use a mp4 (h264 codec) video now, the video starts playing although the complete video is not yet transferred (good, that is what I want).
But this seems not to work with a webm video (vp9 codec). Here the html video objects waits until the whole file is transferred. Is there a connection between codec and the behavior of html video player (e.g. if it starts playing although the file is not yet complete)?
You can try to use enableRangeProcessing.Here is a demo:
Action:
public IActionResult GetVideo()
{
var f = PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(), #"wwwroot\video", "1.mp4"), "video/webm", enableRangeProcessing: true);
return f;
}
View:
<video id="video" preload="auto" width="320" height="240" controls>
<source src="https://localhost:44300/B/GetVideo" type="video/webm" />
</video>
result:
Minimal example (non-working) to play a video from a local file in a bokeh app is below. The app uses a Div object with an html <video> tag. The expected behavior would be to play the video in the app immediately. The non-working part is the reference to the local video file.
from bokeh.models import Div
from bokeh.io import curdoc
div = Div(text="""
<video width="300px" height="150px" controls autoplay>
<source src="movie.mp4" type="video/mp4"></video>
""")
curdoc().add_root(div)
The app is so.py and video is movie.mp4, both in the same directory.
Running the app from the command line indicates a 404 error when looking for movie.mp4
Screenshot of the app in the browser indicates the video player did load just could not find the video.
Have also tried <source src="file:///C:/so/movie.mp4" type="video/mp4"> which references the full path of the video file, also non-working.
I don't think auto-loading video files from a local directory at page opening is supported in Bokeh. You need to place the video on a web server and load it using HTTP protocol. As #Doug Sillars noted in his post you should replace your src="movie.mp4" with src="http://localhost:5006/so/sample.mp4" and eliminate the need for running external Mongoose web server. So you code would simply become like the code below (it's tested and it's working!) Run it with bokeh serve --show so
main.py
from bokeh.models import Div
from bokeh.io import curdoc
div = Div(text="""
<video width="300px" height="150px" controls autoplay>
<source src="http://localhost:5006/so/static/movie.mp4" type="video/mp4"></video>
""")
curdoc().add_root(div)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{{ bokeh_css }}
{{ bokeh_js }}
</head>
<body>
{{ plot_div|indent(8) }}
{{ plot_script|indent(8) }}
</body>
</html>
directory structure:
so
|
+---main.py
+---static
+---movie.mp4
+---templates
+---index.html
Another option is to use FileInput widget and give user the possibility to select the file from the local file system like in this example below (tested on Bokeh v2.2.1):
from bokeh.plotting import show
from bokeh.models import Div, Column, FileInput, CustomJS
code = ''' const file = document.getElementsByTagName('input')[0].files[0]
var URL = window.URL || window.webkitURL
var fileURL = URL.createObjectURL(file)
var videoNode = document.querySelector('video')
videoNode.src = fileURL '''
div = Div(text="""<video width="500px" height="250px" controls><source src="" type="video/mp4"></video>""")
fileinput = FileInput(accept=".mp4,.mpg,.mov", visible = True, width = 250, name = 'fileinput')
fileinput.js_on_change('value', CustomJS(args={'fileinput': fileinput}, code = code))
show(Column(div, fileinput))
Your page is at localhost:5006/so, but you are requesting the video at localhost:5006/movie.mp4. I think you want localhost:5006/so/movie.mp4.
Does not seem possible to play a video as a local file because of security issues. Creating a very quick webserver using mongoose.ws worked. The code above then becomes
from bokeh.models import Div
from bokeh.io import curdoc
div = Div(text="""
<video width="300px" height="150px" controls autoplay>
<source src="http://192.168.1.197:8000/movie.mp4" type="video/mp4"></video>
""")
curdoc().add_root(div)
where the URL is created by the mongoose application.
I am playing with video.js. Here is my code:
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin" style="margin-left:auto;margin-right:auto;"
controls autoplay preload="auto" width="1300" height="800"
data-setup='{}'>
<source src="/test.webm" type="video/webm" />
<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 above code was literally copied from the tool's website (except the video and autoplay):
http://docs.videojs.com/docs/guides/setup.html
My movie is played in both Chrome and Firefox. If I want to see something later in the movie, I am able to drag the dot in the progress bar to the point I want and the movie starts just there. However, when doing so in Chrome I got error:
A network problem caused the media download to fail part-way.
You can do it with javascript
videojs("last", {}, function () {
var myplayer = this;
myplayer.currentTime(s); // s being to time in second you want
}
Remove the data-setup attribute from the html tag and put what you had in second argument.
The first argument is the id of the video(be sure it has never been
initialized)
The second is optional it is what you want to have in data-setup
The third is a function that you want to call when it is
initialized.
The following code sets up video.js and listens on loadedalldata event to start playing and listens on ended event to load another file. If an flv plays first, I get loadedalldata event for loading the flv, then it plays, I get the ended event, the mp4 loads, but I never get the loadedalldata event.
If the mp4 plays first, I get two loadedalldata events, the mp4 plays, I get the ended event, the flv loads, I get the loadedalldata event, the flv plays, I get the ended event, the flv loads again - but I never get the loadedalldata event.
If both vids are mp4, it plays in a loop (with two loadedalldata events each time).
So it seems, something about the flv playing disrupts the next loadedalldata event.
i event tried adding a .on('loadedalldata') event in the ended handler. No change.
Any suggestions??
<html>
<head>
<link type="text/css" href="/js/video.js/video-js.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/video.js/video.js"></script>
<script>
videojs.options.flash.swf = "/js/video.js/video-js.swf"
$(document).ready(function () {
var playIt = function playVid() {
alert("Event");
this.play();
}
videojs("video1", {}, function(){
this.on('loadedalldata', playIt);
this.on('ended', function() {
this.src({ type: "video/mp4", src: "/files/test.mp4" });
this.load();
});
this.src({ type: "video/flv", src: "/files/barsandtone.flv" });
this.load();
});
});
</script>
</head>
<body>
<div id="div1">
<video id="video1" class="video-js vjs-default-skin"></video>
</div>
</body>
</html>
It looks like that's a bug in Video.js when playing additional sources through Flash. With Flash, progress events are created manually in javascript as opposed to being able to use the native events like with html5. This line of code turns the events off as soon as the buffer reaches 100%, but then never resets itself on a later source load.
https://github.com/videojs/video.js/blob/ce18a9af740eb2a01f2b0efe2d10299de32818ce/src/js/media/media.js#L192
It should restart these events when the loadstart event is fired again by the flash player, signaling a new source has been loaded. You should submit an issue on the video.js repo for this. https://github.com/videojs/video.js/issues/new
I am trying to offer a playlist of videos and only play a video once its link was clicked. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>WW Video Player</title>
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
</head>
<body>
<video id="video_player" class="video-js vjs-default/skin" width="800" height="600" data-setup='{ "controls": true }'></video>
<script type="text/javascript">
videojs("video_player", {}, function() {});
function SelectVideo(path)
{
var mplayer = videojs("video_player", { "controls": true, "autoplay": false });
mplayer.src({ type:"video/mp4", src: path});
mplayer.play();
mplayer.requestFullScreen();
}
</script>
Play Video
</body>
</html>
In the <video> tag, I have tried adding plain controls and removing data-setup, but I can't get the controls to show up.
Furthermore, mplayer.requestFullScreen(); isn't working, either - here's Firebug's error message:
TypeError: mplayer.requestFullScreen is not a function
I'm running Firefox 22.0 on Windows 7 64bit.
Any ideas? Thanks!
Video.js is good and bad at the same time. I appreciate the work that's gone into it, but I've spent days getting it to work correctly. I wish I'd found your answer earlier, codoplayer looks good.
Videojs goes wrong whenever a javascript error occurs, and subsequently fails to set the correct classes on the control bar etc.
The bad javascript could be in your own code, and there is one in video.js that affects Firefox.
First, make sure your own scripts aren't failing...
The function that must be changed in video.js is: vjs.Player.prototype.techGet()
When an exception occurs, it handles it, then re-throws at the end. Replace the line 'throw e;' with 'return null;'
Why? There are methods within video.js that do not seem to realise that techGet could throw.. here is an example:
vjs.Player.prototype.currentSrc = function(){
return this.techGet('currentSrc') || this.cache_.src || '';
};
It throws an exception on techGet whenever the tech is flash, which is common in Firefox, IE8 etc. It will never reach this.cache_.src || ''. It looks like that wasn't the intention, so it's probably a bug.
If interested in IE8, you will have to do something with all the calls to innerHTML, they may fail and will need replacing with a method that works on the DOM instead.