I'm using video.js to create a playlist video component. I'm trying to loop through an array and place the images in the div "playlistnav". Below is my code. The poster variable is what holds the images.
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- 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>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="videojs-playlists.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>
<div class="playlistnav">
<h1></h1>
<button type="button" data-action="prev">Previous</button>
<button type="button" data-action="next">Next</button>
</div>
<div class="wrapper">
<div class="videocontent">
<video id="videoplayer" class="video-js vjs-default-skin vjs-fullscreen" controls preload="none" width="auto" height="auto"
data-setup="{}">
</video>
</div>
</div>
<script type="text/javascript">
var vid = videojs("videoplayer");
vid.on("ended", function(){
alert("This is the end");
})
</script>
<script>
var videos = [
{
src:['http://stream.flowplayer.org/bauhaus/624x260.mp4'],
poster : 'http://flowplayer.org/media/img/demos/minimalist.jpg',
title : 'Video 1'
},
{
src : ['http://stream.flowplayer.org/night3/640x360.mp4'],
poster : 'http://flowplayer.org/media/img/demos/playlist/railway_station.jpg',
title : 'Video 2'
},
{
src : ['http://stream.flowplayer.org/functional/624x260.mp4'],
poster : 'http://flowplayer.org/media/img/demos/functional.jpg',
title : 'Video 3'
}
];
var player = videojs('videoplayer');
player.playList(videos, {
getVideoSource: function(vid, cb) {
cb(vid.src, vid.poster);
}
});
$('[data-action=prev]').on('click', function(e) {
player.prev();
});
$('[data-action=next]').on('click', function(e) {
player.next();
});
</script>
</body>
</html>
Try something like this:
document.ready(function(){
var nav = $('.playlistnav');
$.each(videos, function(i,val){
nav[i].append("<img src=" + $(this).poster + ">");
});
});
JSFiddle: http://jsfiddle.net/skoshy/7CMsn/
The only part I added is this:
for (x=0; x < videos.length; x++) {
$('.playlistnav').append('<img width="200" src="'+videos[x].poster+'"/>');
}
Related
I am trying to create a video element using the 'media-element-and-player' which is a plugin for creating a custom video player.
It is working fine when i create the element myself but it doesn't work when the video element is dynamically created by JQuery.
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="video-preview">
</div>
<script type="text/javascript">
var div = $('.video-preview');
var video = '<video class="mejs__player" preload="true"><source
type="video/mp4" src="batman.mp4"></video>';
div.append(video);
</script>
</body>
</html>
How to achieve this?
And thanks in advance!
This should do the trick:
<html>
<head>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/mediaelement-and-player.min.js"></script>
<!-- Add any other renderers you need; see Use Renderers for more information -->
<link rel="stylesheet" href="/path/to/mediaelementplayer.min.css" />
</head>
<body>
<div class="video-preview">
</div>
<script type="text/javascript">
var div = $('.video-preview');
var video = '<video class="mejs__player" preload="true"><source type="video/mp4" src="batman.mp4"></video>';
div.append(video);
// After adding dynamically new video element, you should initialize the mediaelement plugin on that node as when the page loads this isn't rendered
$('.video-preview video').mediaelementplayer({
pluginPath: "/path/to/shims/",
success: function(mediaElement, originalNode, instance) {
// do things
}
});
</script>
</body>
</html>
Why doesn't image show on load, but shows on refresh?
My problem is like the one above, except with multiple video files. On Chrome, videos won't display unless after refresh. On Safari, they seem to display fine. Per the other answer, I'm assuming this has to do with files loading asynchronously and can be fixed by proper use of onload in my jquery, but I'm unfamiliar with how to best do that.
HTML
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/hinukan/style.css">
</head>
<body>
<div id = "container">
<div id="box1" class = "box">
<div id="video1" class="video"> <video poster loop muted playsinline controls><source src=assets/portrait.mp4></video></div>
<div id="text1" class="text"><p>mytext</p></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="/hinukan/javascript.js"></script>
</html>
JAVASCRIPT
if ($(".video").css("max-width") == "850px" ){
$(".box").children(".text").click(function() {
$(this).toggleClass("ttoggle");
$(this).siblings(".video").toggleClass("vtoggle");
});
$('video').click(function(){
this[this.paused ? 'play' : 'pause']();
});
}
else {
$(".box").children(".video").click(function () {
if (!$(this).hasClass("vtoggle")) {
$(this).siblings(".text").toggleClass("ttoggle");
$(this).toggleClass("vtoggle");
}
});
$(".box").children(".text").click(function() {
if ($(this).hasClass("ttoggle")) {
$(this).siblings(".video").toggleClass("vtoggle");
$(this).toggleClass("ttoggle");
}
});
$(".video").hover(function () {
$(this).siblings(".text").addClass("tselect");
$(this).children("video")[0].play();
}, function () {
var el = $(this).children("video")[0];
el.pause();
$(this).siblings(".text").removeClass("tselect");
});
}
I am attempting to make my iframe invisible upon loading and visible when mouse is hovering over it, however I'm not sure what I am doing wrong. Can someone tell me what is it I am doing incorrectly?
$(document).ready(
function makeVisible(){
$(".video").hover(function(){
$('.youtube').css("visibility", "visible");
})
)}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<link rel = "stylesheet" type = "text/css" href = "stylesheet.css">
<script src="JavaScript.js" type="text/javascript"></script>
<section class = "video">
<p>This is my section</p>
<iframe class = "youtube" hover="makeVisible()" width="700" height="397" src="https://www.youtube.com/embed/pMX5yyW5Qp0" frameborder="0" allowfullscreen style="visibility:hidden"></iframe>
</iframe>
</section>
There's no need for JS code here, you can use the :hover pseudo selector in JS to amend the opacity of an element, like this:
iframe { opacity: 0.2; }
iframe:hover { opacity: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="JavaScript.js" type="text/javascript"></script>
<section class="video">
<p>This is my section</p>
<iframe class="youtube" width="700" height="397" src="https://stacksnippets.com" frameborder="0" allowfullscreen></iframe>
</section>
Note that I had to change the iframe URL to stacksnippets.com as it's sandboxed.
I know how to change the transparency/opacity of something when you click on something using Javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<link rel = "stylesheet" type = "text/css" href = "stylesheet.css">
<script src="JavaScript.js" type="text/javascript"></script>
<section class = "video">
<p>This is my section</p>
<iframe class = "youtube" onclick="makeVisible()" width="700" height="397" src="https://www.youtube.com/embed/pMX5yyW5Qp0" frameborder="0" allowfullscreen style="visibility:hidden"></iframe>
</iframe>
</section>
JavaScript.js:
function makeVisible(){
var video = document.getElementsByClassName('youtube')
video.style.opacity = "Your opacity here"
}
i want to create a simple chrome App which launches a window, 'window.html', which contains 2 buttons.
1/ #btn1 creates a new window, loading "video.html". A video player,
playing "file1.webm".
2/ #btn2 updtates the source of the video from "file1.webm" to
"file2.webm".
The first part is trivial :)
The second part is tricky.
Is it possible ?
You'll find my files below.
Thank you :)
<!DOCTYPE html>
<html >
<head>
<title>Chrome : Multiple Window</title>
<link href="./css/main.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/test.js"></script>
</head>
<body>
<button id="btn1" type="button" >Launch video Player</button>
<button id="btn2" type="button" >Update Video</button>
</body>
</html>
$(document).ready(function() {
$("#btn1").click(function(){
chrome.app.window.create('video_window.html', {"width":1280, "height": 720});
});
$("#btn2").click(function(){
$('#myvideo video source').attr('src', './video/avatar.webm');
});
});
<!DOCTYPE html>
<html>
<head>
<link href="./css/video.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<video id="myvideo" autoplay loop>
<source src="./video/the_master.webm" type="video/webm">
</video>
</div>
</body>
</html>
chrome.app.window.create accepts a callback which will be invoked with the created window. You can store a reference to this window, and then either execute functions directly on it, or use window.postMessage to communicate with it.
var videoWindow = null;
$("#btn1").click(function() {
chrome.app.window.create('video_window.html', {
"width": 1280,
"height": 720
}, function(window) {
videoWindow = window.contentWindow;
});
});
$("#btn2").click(function() {
videoWindow.doSomething('./video/avatar.webm');
});
Another option, is to use the chrome runtime API to communicate:
chrome.runtime.sendMessage("do-stuff")
chrome.runtime.onMessage.addListener(function(e) {
// do stuff
})
I used a simple random number generator and named my mp4 files "1" "2" and "3" and my html page is blank
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Connor's video clock</title>
</head>
<body>
<script>
< div id = vid >
< video width = "320"
height = "240"
controls >
< source src = Math.floor((Math.random() * 3) + 1) + ".mp4" > Please update your browser < /source>
</script>
</body>
</html>
You can't put html tags within script tags. Additionally, I think HTML tags should not have spaces between the angled bracket and the tag name. Try this instead:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Connor's video clock</title>
</head>
<body>
<div id = "vid">
<video width = "320"
height = "240"
controls>
<source id="vsrc" />
Please update your browser.
</video>
</div>
<script>
document.getElementById("vsrc").src = Math.floor((Math.random()*3)+1) + ".mp4";
</script>
</body>
</html>
Here, the javascript fills in the src for the video by selecting that element (by using document.getElementById()) and then altering the src attribute.
I guess what you want is to display a video where its source is assigned by your javascript function. The problem your code cannot run is you are not writing javascript in the script tag. What you have written inside are actually HTML tags. Attached an example for your reference. According to this changing source on html5 video tag , it may not be possible to change source from function. Change the src attribute in video tag instead.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var srcLinkSuffix = Math.floor((Math.random() * 3) + 1);
var video = document.getElementById('video');
var srcLink = "video_"+srcLinkSuffix+".mp4";
video.setAttribute("src", srcLink );
});
</script>
</head>
<body>
<video width="320" height="240" controls src="" id="video" />
</body>
</html>