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.
Related
I have disabled right click on my website's videos because I want to discourage downloads. To that end I use the following code:
<video oncontextmenu="return false" controls="controls" controlslist="nodownload">
<source src="..."> video
</video>
However, with this users don't have the Controls' functionality. In particular, they cannot move forward or backwards with the keyboard arrows. Normally, to enable this functionality, you have to right click the video and select "Show Controls", as shown below:
Naturally, in my case that is not possible.
How can I enable those controls by default, so I can keep hiding that context menu? I've searched through default <video> attributes but can't find any relevant for me. Any ideas?
To disable right-click on video tag and yet keep video controls, try my example below:
What the codes does:
Gives your video tag an ID (see: id="myVid" )
Uses Javascript's preventDefault(); to block right-click on a specific item by its ID. (Eg: You might still want right-click to work on other [non-video player] parts of the page.)
Testable code example:
<!DOCTYPE html>
<html>
<body>
<video id="myVid" width="640" height="480" controls="controls" controlslist="nodownload">
<source src="filename.mp4" type="video/mp4">
</video>
</body>
</html>
<script>
//# use this line to prevent context menu in Video Element
document.getElementById("myVid").addEventListener('contextmenu', function (e) { e.preventDefault(); }, false);
</script>
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:
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
I'm trying to have a video that loads the first frame of the video as the poster but doesn't autoplay. I need it to work on desktop, iPad, and iPhone.
Desktop: You don't need anything special, this will load the first frame as a poster
<video>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
iPhone: This takes a bit of a hack since on iPhone the poster isn't automatically loaded. By adding "autoplay" the browser loads the first frame as the poster, but without adding "muted playsinline" it won't actually autoplay
<video autoplay>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
iPad: The iPad acts like the iPhone by not pulling the poster by default, but if you add in "autoplay" like I do on iPhone it actually autoplays which I don't want.
So how would I go about pulling in the first frame of the video as the poster without it trying to autoplay the video on load?
I've also tried preload="metadata" and it did not work.
I solved this problem by adding autoplay to my video tag and pausing the video on load this way:
window.onload = function(){
var myVideo = document.getElementById('myVideo');
myVideo.pause();
}
<video id="myVideo" autoplay controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
Looks like adding the time for 0.1 seconds does the trick too.
<video>
<source src="1616911307745.mp4#t=0.1" type="video/mp4">
</video>
A similar approach to Hemmingsen answer but instead of using the onload event on the window object you can use onLoadedData on the video element itself instead:
function handleLoadedData(event) {
event.target.pause();
}
<video autoplay onLoadedData="handleLoadedData(event)">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
PS: The key here is to use autoplay on the video so Safari will load the poster image but immediately stop the video after load so it won't autoplay it.
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.