Trying to create a custom skinned video player on this page.
http://turbosaurusrex.github.io/keets/
I'd like to hide every element except the play button. I've linked video.js and the css file but it doesn't seem like it's working?
I threw the cdn right after the body tag:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
The video player returns the browser's native player. No change I make to the css does anything. Is this a jekyll thing I've overlooked, am I stupid or what? I don't know. P
You need an id attribute and data-setup for each video.
https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md#step-2-add-an-html5-video-tag-to-your-page
<video autoplay="" controls="" loop="" poster="/video/keets/keet1.jpg" id="firstvid" class="video-js vjs-default-skin col-xs-12" data-setup="{}">
<source src="/video/keets/keet1.webm" type="video/webm">
<source src="/video/keets/keet1.mp4" type="video/mp4">
</video>
Related
I use html5 to play video like this.
<video oncontextmenu="return false;" id="videoElementID" width="320" height="240" controls>
<source src="Welcome.mp4" type="video/mp4">
<track src="Welcome.vtt" kind="subtitles" srclang="en" label="English">
</video>
It can protect right click to download but it can download in source code like this.
In udemy it have no video in code like this. How to protect download video in source code to download.
You can't. Because, If somebody is watching your video — he already has it.
I tried playing the video using html5 video tag and video.js player, but i am not able to play the video and the video has an mp4 format.
the video can be downloaded from https://drive.google.com/open?id=0BwvTwArK2QWBVVZhbnAtMjZlWlU
<html>
<head>
<link href="http://vjs.zencdn.net/6.2.7/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://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" data-setup="{}">
<source src="test.mp4" type='video/mp4'>
<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 src="http://vjs.zencdn.net/6.2.7/video.js"></script>
</body>
</html>
I am getting an error message :- enter image description here
Try using single-quotes with data-setup as it is expected to contain JSON.
data-setup='{}'
I'd like to learn how to build animated areas on websites, like Aeria Games does on their website.
http://www.aeriagames.com/
When the page loads the top banner begins to animate, and then each banner rotation after that is also animated.
Does anyone know of a guide/tutorial to accomplish the same result?
You can use video (for .ogg, .webm, .mp4) embed (for .swf) or img (for .gif)
ex:
<video width="320" height="240">
<source src="movie.mp4" type="video/mp4">
</video>
or
<embed src="helloworld.swf">
or
<img src="animation.gif" alt="Animation" height="42" width="42">
What I would like is to have a video play in full screen once and then disappear leaving the web page behind. is this possible using Javascript, HTML and possibly CSS?
The video in question is called Website Opening.mp4
<video width="100%" autoplay="autoplay">
<source src="movie.mp4" type="video/mp4" />
</video>
Edit: When autoplay attribute is present, the video will automatically start playing as soon as it can i.e. when the page loads.
I tried the following HTML for displaying a video. But I am not able to see video.
Its only loading the video, but not playing it. I'm using 'video.js' a JavaScript and CSS library which manipulates the video tag for a consistent UI.
If I am missing something please tell me.
Here is my code:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}" >
<source src="scroll_index.mp4" type='video/mp4'>
<source src="scroll_index.webm" type='video/webm'>
</video>
I have included above code in body tag and also included references to video.js and video.css in the head tag.
I don't know what browser you are testing with, perhaps it doesn't support the html5 video tag, but regarding your comment, I don't think so :)
However, you have neither set the controls attribute to make the control panel appear so user can manually start (and control) the video, nor set the autoplay attribute so that the video will play as soon as it is ready, so I suggest adding these attributes:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
autoplay="autoplay" controls="controls"
data-setup="{}">
<source src="scroll_index.mp4" type='video/mp4'>
<source src="scroll_index.webm" type='video/webm'>
</video>