I am using Video.js to play a video on my site and would like to disable the default double click to full screen behaviour.
I found this in the docs but not sure how to implement it. I have tried placing the suggested code in my main.js file but I guess I need to do something else as that doesn't work?
This is the simplified video.js code I'm using:
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="MY_VIDEO_POSTER.jpg"
data-setup="{}"
>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<source src="MY_VIDEO.webm" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.8.2/video.js"></script>
</body>
</html>
As you're using data-setup to init the player, then add it to the JSON string:
data-setup='{"userActions": {"doubleClick": false }}'
Related
I am testing a script that would essentially let me pull the video source URL through ajax and change the video source to try to hide the source of my video files from users (basically dont want people downloading my content).
I have no issues getting the ajax to work, but the "replaceChild" command doesnt seem to be doing anything for me. I stripped out all the ajax and tried to run a basic function calling this command with "alerts" along the way to show me what is working and what is not, it appears to me that the replaceChild command is not working.
Can anyone spot any issues with my code or offer alternate solutions?
<!DOCTYPE html>
<html>
<head>
<title>Test Script</title>
<meta name="robots" content="noindex,nofollow">
<script type="text/javascript">
function testFunction(){
var video = document.getElementById("video2").getElementsByTagName("source")[0];
var source = "realvideo.mp4";
clone = video.cloneNode(true);
alert(clone.src);
clone.setAttribute("src",source);
alert(clone.src);
video.parentNode.replaceChild(clone,video);
alert(video.src);
}
</script>
</head>
<body onLoad="testFunction()">
<div align="center">
<video id="video" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="realvideo.jpg">
<source src="realvideo.mp4" type="video/mp4">
</video>
</div>
<div>
<video id="video2" class="video-js vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="realvideo.jpg">
<source src="sorry.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
That code alerts "sorry.mp4", "realvideo.mp4", "sorry.mp4"
This is expected behaviour. When you call:
video.parentNode.replaceChild(clone,video);
video will not suddenly become a different element. It will still have the same src attribute as before. video is detached from the document by the above replaceChild call, and clone is injected in its stead... it's an in/out swap. So you should not expect that video still references the element in the document and becomes the same reference as clone.
To really verify the change you could end your function with this code:
video = document.getElementById("video2").getElementsByTagName("source")[0];
alert(video.src);
I am using video.js for my video gallery. I tried video.js but I am getting the following error message.
Uncaught TypeError: $(...).lightGallery is not a function
My code:
<html>
<head>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
</head>
<body>
<!-- Hidden video div -->
<div style="display:none;" id="video1">
<video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none">
<source src="videos/test1.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div style="display:none;" id="video2">
<video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none">
<source src="videos/test2.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<!-- data-src should not be provided when you use html5 videos -->
<ul id="video-gallery">
<li data-poster="video-poster1.jpg" data-sub-html="video caption1" data-html="#video1" >
<img src="1.jpg" />
</li>
<li data-poster="video-poster2.jpg" data-sub-html="video caption2" data-html="#video2" >
<img src="2.jpg" />
</li>
...
</ul>
</body>
<script>
$('#video-gallery').lightGallery({
videojs: true
});
</script>
</html>
please suggest the solution.
You seem to be missing the script tag for lightgallery
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.4/js/lightgallery.min.js"></script>
$(document).ready(function() {
$('#video-gallery').lightGallery({
videojs: true
});
});
Strange thing, but the current version could be initialized only this way (typical JQuery syntax doesn't work):
lightGallery($('#video-thumbnails')[0], {
download: false,
//other options
});
There is even opened Issue on Github: https://github.com/sachinchoolur/lightgallery.js/issues/42
Is it possible to make video.js use the fallback flv videos as standard in IE? I can't get mp4 to work in Internet Explorer but flash works as long is there is no mp4 available.
First load the player script/css then we set up our "default" tech order. After that we use the IE Conditional comments to detect IE and set its tech order.
<link href="http://vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.6/video.js"></script>
<script>
var techOrderArr = ["html5", "flash"]; // Default for everyone
</script>
<!--[if IE]><script>
techOrderArr = ["flash","html5"]; // IE specific
</script><![endif]-->
After that, setup your video as normal using the javascript initialization, but include the techOrder parameter.
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg">
<source src="MY_VIDEO.mp4" type='video/mp4'>
<source src="MY_VIDEO.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>
<script>
videojs("MY_VIDEO_1", {
techOrder: techOrderArr
});
</script>
Hi after coding a tutorial on how to make a media player I find that i cannot connect to any media with an absolute URL. After having made a diligent search for the answer W3schools and elsewhere the syntax still seems unclear in my mind. As far as I am aware the source tag is used and can be used to target different media types eg, ogg, webm, mp4, for example,
<video id='media-video' controls>
<source src="fish.mp4" type="video/mp4">
<source src="fish.webm" type="video/webm">
</video>
My question is this, is it possible to use an absolute URL with the source tag in this way and what is the syntax for doing so? kind regards and thanks for taking the time - robbie
guys could you take a look at this, i apologise as its not strictly html and css but it contains the script also, as you can see the media player calls certain functions one of which should be the onclick function to load the now relative url, but it doesnt work! ahhh is there no life without pain! Any ideas?
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Sample Media Player using HTML5's Media API</title>
<link href='media-player.css' rel='stylesheet' />
<script src='media-player.js'></script>
</head>
<body>
<h1>Sample Media Player using HTML5's Media API</h1>
<div id='media-player'>
<video id='media-video' controls>
<source src=http://www.youtube.com/myvideo type="video/mp4">
</video>
<div id='media-controls'>
<progress id='progress-bar' min='0' max='100' value='0'>0% played</progress>
<button id='replay-button' class='replay' title='replay' onclick='replayMedia();'>Replay</button>
<button id='play-pause-button' class='play' title='play' onclick='togglePlayPause();'>Play</button>
<button id='stop-button' class='stop' title='stop' onclick='stopPlayer();'>Stop</button>
<button id='volume-inc-button' class='volume-plus' title='increase volume' onclick='changeVolume("+");'>Increase volume</button>
<button id='volume-dec-button' class='volume-minus' title='decrease volume' onclick='changeVolume("-");'>Decrease volume</button>
<button id='mute-button' class='mute' title='mute' onclick='toggleMute("true");'>Mute</button>
</div>
<div id='media-play-list'>
<h2>Play list</h2>
<ul id='play-list'>
<li><span class='play-item' onclick='loadVideo(http://www.youtube.com/myvideo);'>Fischer</span></li>
<li><span class='play-item' onclick='loadVideo("paddle-wheel.webm", "paddle-wheel.mp4");'>Paddle Steamer Wheel</span></li>
<li><span class='play-item' onclick='loadVideo("grass.webm", "grass.mp4");'>Grass</span></li>
</ul>
</div>
</div>
Of course it is possible. Just include the absolute path to your videos:
<video controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
The gist is to organize your file in the correct order, user browser will auto detect the supported file types and play it accordingly.
Read more #: http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5/.
And I believe you've read this: http://www.w3schools.com/tags/tag_video.asp ?
I downloaded the video-js-4.2.1.zip from http://www.videojs.com/ and in demo.html I changed the source file for the video but it won't load. I've even inputed the full http:// adress and still doesn't work. It only works with the demo video from http://www.videojs.com/ . How to make it to work?
Respectfully,
Vasile Lucian BUJOR
PS. Here is the code ( I add a png for the poster and removed the captions from the original code and renamed demo.html to index.html ):
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<!-- 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>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="360"
poster="principal.png"
data-setup="{}">
<source src="/wildelife.mp4" type='video/mp4' />
<source src="/wildelife.webm" type='video/webm' />
</video>
</body>
</html>
It may help to check the documentation on the github repository ( https://github.com/videojs/video.js/blob/master/docs/setup.md ).
Also try not making a / in front of the video-path. Try:
<source src="wildelife.mp4" type='video/mp4' />
if the path to the file is in the same folder like your .html-file.
I don’t know what else to say, it’s perfectly working over here. You could check on your folder structure anyways.
hope that helps