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>
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:
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 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.
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.
I've got a iframe with pdf file:
<iframe src="pdf/sample.pdf"></iframe>
How to set that the iframe is the same height as the pdf file, without scrollbars?
If you want to display the PDF without scrollbars, you can do this by passing parameters in the URL. Adobe has documented this here:
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
Try this:
<iframe src="pdf/sample.pdf#view=fit"></iframe>
You are not exactly setting the height of the iframe to fit the PDF, but it is probably the most robust solution since it is browser-independent and doesn't require JavaScript.
Here is an update after Daniel's comment.
I created a test HTML as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<iframe src="http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf#view=fit&toolbar=0&navpanes=0"
width="300px" height="400px"></iframe>
</body>
</html>
This is how it looks in Chrome:
This is as expected.
Note that I also turned off the toolbar and the navpane so there is room for the page.
You can do it simply using the method I've explained on my facebook post https://www.facebook.com/antimatterstudios/posts/10151007211674364
Do you have an IFrame, which you want to automatically set the height of because you're hosting a page from another website in yours.
Well, unfortunately the IFrame cannot take the height of the content you are loading and unless you put a height, it'll show either the default height, or no height at all. This is annoying.
I have the solution for you, it'll only work on recent, standard supporting browsers, but also works in IE8 too, so for about 99% of you it's perfect.
The only problem is you need to insert a javascript inside the iframe, which is easy if the content you are loading belongs to you, you can just open the content you're loading and put the javascript in the content.
In your website, you need a piece of javascript which can "receive a message from the IFrame", like this
jQuery(document).ready(function(){
jQuery(window).bind("message",function(e){
data = e.data || e.originalEvent.data;
jQuery("iframe.newsletter_view").height(data.height);
});
});
in your IFrame content, add this at the very bottom, probably it's ok to just do something like "$template.$javascript" using PHP or something, even if the javascript is not inside the tag
<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
parent.postMessage({
height:$(document.body).height()+50+"px"
},"*");
});
</script>
Obviously I am using jquery, you dont have to, it's just easier and probably you are using it, so save yourself the hassle.
if you do that, when the iframe loads, it'll send a signal back to the parent window, which will resize the iframe based on the length of the content :)
I'm sure you can figure out how to alter the little things, but thats the method I'm using
My solution
$(document).ready(function(){
var width = $(window).width();
var height = $(window).height();
$('#objFile').attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');
});
<object data="myFile.pdf" type="application/pdf" id="objFile"></object>