I am not a coder but I am able to successfully create the function I want with JWPlayer:
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "media/video.mp4",
image: "images/title.gif",
controls: true,
width: 320,
height: 240
});
</script>
With the above script, the following link will seek to 1 minute: a href="#" onclick="jwplayer(myElement).seek(60)"
How can I create similar html links for videojs to be able to seek to arbitrary points in the video?
Related
I am using GLightbox in a project I am working on. I have a hyperlink that has a URL to a self-hosted MP4 video. The video is opened in a GLightbox. I have poster images already setup for my videos, but I can't figure out where to set the poster image in the Glightbox setup. Here is my html link that launches the video in the lightbox.
<a href="<?= $video_url; ?>" class="standard-lightbox">
Here is the javascript configuration I have in my site.js file:
let standardLightboxSlideHTML = `<div class="gslide">
<div class="gslide-inner-content">
<div class="ginner-container">
<div class="gslide-media">
</div>
<div class="gslide-description">
<div class="gdesc-inner">
<h4 class="gslide-title"></h4>
<div class="gslide-desc"></div>
</div>
</div>
</div>
</div>
</div>`;
var standardLightbox = GLightbox({
selector: '.standard-lightbox',
width: '1280px',
height: '720px',
skin: 'modern',
closeOnOutsideClick: true,
slideHTML: standardLightboxSlideHTML,
type:'video',
autoplayVideos: false,
plyr: {
config: {
ratio: '16:9', // or '4:3'
muted: false,
hideControls: false,
autoplay: false,
autopause: true,
volume: 0.5,
controls: ['play-large', 'play','progress','volume','mute','fullscreen']
}
}
});
I have tried adding a data-poster value to the hyperlink. That didn't work. That is where I would like to set it and then I want to GLightbox to use it. Any ideas how to make that work?
I want to tag this post as "glightbox", but I don't have enough rep.
I was able to resolve my problem this way.
In wordpress I setup two new fields, one for the url to the video and another for the poster image.
I changed my code to output the url and poster urls in the hyperlink that is clicked.
In my Glightbox setup, I just grab those values and add it dynamically with javascript to the video tag. I also add a counter to the hyperlink so I can append the count value to create an ID selector for the video.
standardLightbox.on('slide_after_load', (data) => {
const { slideIndex, slideNode, slideConfig, player, trigger } = data;
var btnClicked = document.getElementById(trigger.id);
var posterimage = btnClicked.getAttribute('data-html5videoposter');
var videoid = btnClicked.getAttribute('data-videoid');
// use the index
var getVideoTag = document.getElementById(videoid);
getVideoTag.setAttribute('poster', posterimage);
});
I'm trying to implement the basic GSAP fade-in / fade-out demo from the barber.js site.
The markup of test page one is as follows:
<body style="background-color: red; color: white;" data-barba="wrapper" data-barba="page1">
<h3>Constant</h3>
<main data-barba="container" data-barba-namespace="home">
<h1>Page 1</h1>
go to page 2
</main>
The markup of test page 2 is as follows:
<body style="background-color: white; color: red;" data-barba="page2">
<h3>Constant</h3>
<main data-barba="container" data-barba-namespace="home">
<h1>Page 2</h1>
go to page 1
</main>
With the following JS at each the bottom of each page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#barba/core"></script>
<script>
barba.init({
//sync: true,
transitions: [{
name: 'opacity-transition',
leave(data) {
return gsap.to(data.current.container, {
opacity: 0
});
},
enter(data) {
return gsap.from(data.next.container, {
opacity: 0
});
}
}]
});
</script>
When leaving the current page the old element fades out OK, however the new element appears underneath a fraction early meaning I have two elements the new one jumping up as the old finishes disappearing?
Is there a way for the new one only to start appearing after the old one has finished?
I agree, the basic example is kinda failed. It turns out it depends on the styles a bit.
I managed to make it work adding display: 'none' to the leave transition, that forces the previous container to disappear before the next starts displaying:
// ...
leave(data) {
return gsap.to(data.current.container, {
opacity: 0,
display: 'none',
});
}
// ...
My best guess: the transition is meant to allow container overlapping. So you could get away with css (position: relative or something like that).
I am using a script with a dojo chart inside a tab: chart page.
If you open the chart page with Google Chrome the chart is visible. If you open it with Firefox or Explorer 11 the chart is NOT visible.
All my browsers are updated to their latest versions.
Can somebody tell me why am I getting this error?
This is my script:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/themes/calcite/dijit/calcite.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>
<script>
require([
"dojox/charting/Chart",
"dojox/charting/Chart2D",
"dojox/charting/action2d/MoveSlice" ,
"dojox/charting/action2d/Tooltip",
"dojo/ready"],
function(Chart, Chart2D, MoveSlice, Tooltip, ready){
ready(function(){
var chart1 = new Chart("He");
chart1.addPlot("default", {
type: "Pie",
labelOffset: 25,
font: "9pt Arial"
});
chart1.addSeries("He", [
{y: 1, text: 1},
{y: 1, text: 2},
{y: 1, text: 3}
]);
new Tooltip(chart1, "default");
new MoveSlice(chart1, "default");
chart1.render();
});
});
</script>
</head>
<body class="calcite">
<div>
<div id="He" style="width: 140px; height: 140px; "></div>
</div>
</body>
</html>
I have recreated your issue on https://jsfiddle.net/1k6w8otn
Indeed on Chrome it works fine while on IE11 it show blank page. IE11 console however reports Permission denied and debugger sniffing all exception stops at some point at getComputedStyle definition. Quick look on dojo forum here shows that there was blocking issue 18973 opened for Dojo 1.12.1.
Switch to dojo 1.12.2 or newer and IE11 and FF renders pie chart correctly again. See modified jsfiddle: https://jsfiddle.net/1k6w8otn/2
I am trying MapBox with Vue 2 and I cannot make the map take the full width of the container. It only renders on 50% of the width of the container.
I have included the files in the head of my index.html as follows:
<script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' />
I want the map in a component (Map.vue, I am using vue-router), so here is the code in Map.vue:
Script:
import Mapbox from 'mapbox-gl-vue';
export default {
components: {
'mapbox': Mapbox
}
}
Template:
<mapbox access-token="pk.eyJ1Ijoic3BlZW5pY3Q....."
:map-options="{
style: 'mapbox://styles/mapbox/streets-v9',
center: [-96, 37.8],
zoom: 3
}"
:geolocate-control="{
show: true,
position: 'top-left'
}"
:scale-control="{
show: true,
position: 'top-left'
}"
:fullscreen-control="{
show: true,
position: 'top-left'
}">>
</mapbox>
Style:
#map {
width: 100%;
height: 600px;
position: absolute;
margin:0;
z-index:1;
}
I have tried everything I know in the CSS id but it only renders the map in the right half of the width of the container, in the left one only the logo and the controls are displayed while the rest of the area is empty.
To solve the problem, I just had to delete "text-align: center;" from #app in App.vue.
For more details, check the issue I had opened here:
https://github.com/phegman/vue-mapbox-gl/issues/11
It looks like to me, there is something dynamic with the div or the div is rendered later after the instantiation. I have not used vue, however.
I have had this problem with tabs and div rendered after the page load such as in tabs or triggered by JavaScript.
If you use map.invalidateSize(); where map is the object instantiated. This will redraw the map. Try and put this after the window is loaded to test the code. Then perhaps it can be converted into the correct Vue implementation.
window.addEventListener("load", function(){
map.invalidateSize();
});;
I am experiencing some odd behavior where I can play a video file but the same video file generates an error when put into a playlist.
JWPlayer 6.9.4867 (pro version)
Called in tag
<!-- jwplayer code -->
<script type="text/javascript" src="/content/js/jwplayer.js"></script>
<script type="text/javascript"> jwplayer.key = "---key here---";</script>
The following code works fine.
<script type="text/javascript">
jwplayer("myElement").setup({
file: "http://www.artistshare.com/media_proxy.aspx?id=23745&ex=.mp4&mediaTypeID=4",
type: "mp4",
width: 980,
height: 350,
image: "http://www.artistshare.com/images/projects/531/16531.jpg",
});
When converted to a playlist it does not. Media will not load. "Error loading player: No playable sources found"
<script type="text/javascript">
jwplayer("myElement").setup({
playlist: [{
image: "http://www.artistshare.com/images/projects/531/16531.jpg",
file: "http://www.artistshare.com/media_proxy.aspx?id=23745&ex=.mp4&mediaTypeID=4", title: "Testing"
}],
height: 350,
width: 980,
listbar: {
position: 'right',
size: 260
},
});
</script>
Has anyone else experienced this? Seems like a bug but maybe I am missing something. Any insight would be helpful.
The answer is that the type needs to be specified type: "mp4" in the playlist array. Silly mistake but hopefully this will help someone.