We Keep Coding

Video background doesn't play on mobile with VegasJS

I'm trying to autoplay a video background but it won't play on mobile. I'm using Vegas, a jquery slide from Jay Salvat https://vegas.jaysalvat.com/
So, I'm looking for help to autoplay the video background on mobile screens.
This is my code:
<script>
if ($('body').hasClass('video-background')) {
$('body.video-background').vegas({
preload: true,
timer: false,
delay: 5000,
transition: 'fade',
transitionDuration: 1000,
firstTransition: 'none',
slides: [
{ src: 'assets/images/slider-1.jpg',
video: {
src: [
'assets/videos/video-1.mp4'
'assets/videos/video-1.webm'
'assets/videos/video-1.ogv'
],
loop: false,
mute: true
}
},
{ src: 'assets/images/slider-2.jpg',
video: {
src: [
'assets/videos/video-2.mp4'
'assets/videos/video-2.webm'
'assets/videos/video-2.ogv'
],
loop: false,
mute: true
}
},
],
overlay: 'assets/images/bg.png'
});
}
</script>
The owner of the slider said to override this code to make the video play on mobiles but I'm very new to jquery so I don't know how exactly to override it and I just know that it detects if a screen is in mobile:
$.vegas.isVideoCompatible = function () {
var devices = /(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i;
return !devices.test(navigator.userAgent);
}

jwplayer cannot seek video of google photo

I upload a video to google photo.
I use jwplayer to play video. but I can't seek video.
When I click to seek video, video is replay with start time 00:00.
This is my code
player = jwplayer("apicodes-player");
player.setup({
playlist: [
{ sources: [{
label: "360p",
type: "video/mp4",
file: "https://video-downloads.googleusercontent.com/AMfe5wrawK220JrFOrFTfUGIbTtgk_MNzkCa3xGjrNyqCPODbSRcnm8JYAginZRK3VRcEM46ogfCAQzG2n3aly0zn9JQKy0mWx5z1YeNfwsIlUZwh-w_UeTV1xfBiRj6Wt246t5xt1m_lEoL6Ed5W8vptAG4t-3QhG5jqFTdNMJUZWsX8vaBeW_AxM0LGYtihXYZm9r-7aki"
}]},
],
aspectratio: "16:9",
startparam: "start",
primary: "html5",
ga: {},
playbackRateControls: true,
autostart: false,
preload: "auto"
});
I tried demo with https://www.jwplayer.com/developers/player-event-inspector/ but it doesn't not working with seek and rewind.
Json input test is:
{
playlist: [{
sources: [{
label: "360p",
type: "video/mp4",
file: "https://video-downloads.googleusercontent.com/AMfe5wrawK220JrFOrFTfUGIbTtgk_MNzkCa3xGjrNyqCPODbSRcnm8JYAginZRK3VRcEM46ogfCAQzG2n3aly0zn9JQKy0mWx5z1YeNfwsIlUZwh-w_UeTV1xfBiRj6Wt246t5xt1m_lEoL6Ed5W8vptAG4t-3QhG5jqFTdNMJUZWsX8vaBeW_AxM0LGYtihXYZm9r-7aki"
}]
}, ],
"width": "50%",
"aspectratio": "16:9",
"autostart": false,
"controls": true,
"preload": "metadata",
"primary": "html5"
}
Please help me.

I have the same problem. I think this is because the Google Photos server does not support partial content responses. See HTML5 Video Tag in Chrome - Why is currentTime ignored when video downloaded from my webserver? and https://issuetracker.google.com/issues/111931138.
One option would be to download the video from your server and control de streaming yourself.

make a video player which is auto play from playlist using jquery

I need to autoplay from a play list. When a song ends it should automatically play the next song in the play list. How can I do this? Please help.
$(document).ready(function() {
projekktor('#player_a', {
poster: 'media/intro.png',
title: 'this is projekktor',
playerFlashMP4: 'swf/StrobeMediaPlayback/StrobeMediaPlayback.swf',
playerFlashMP3: 'swf/StrobeMediaPlayback/StrobeMediaPlayback.swf',
width: 640,
height: 385,
enableTestcard: true,
autoplay: true,
playlist: [{
0: {
src: "1.mp4",
type: "video/mp4"
},
1: {
src: "2.mp4",
type: "video/mp4"
},
3: {
src: "3.mp4",
type: "video/mp4"
}
}]
}, function(player) {} // on ready
);
});

Recommended to use a 3rd party jquery plugin
Example
https://github.com/brightcove/videojs-playlist
http://videojs.com/

What does this Revolution jQuery do

I was reading some code today and came across this. This is using the Revolution slider with extensions, link to their site here. I'm not entirely sure what this huge piece of code does, and was wondering if there was anyone that could help me out with this. In the code, it says navigation, so is this how the website makes its navigation bar? I was viewing the actual code and noticed that no-where in the code was there an actual place that made the navigation bar. So I'm assuming they used this or some other JavaScript to insert the nav-bar without coding it directly in HTML.
<script type="text/javascript">
var tpj=jQuery;
var revapi4;
tpj(window).load(function() {
if(tpj("#rev_slider_4_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_4_1");
}else{
revapi4 = tpj("#rev_slider_4_1").show().revolution({
sliderType:"standard",
jsFileLocation:"assets/revolution/js/",
sliderLayout:"fullscreen",
dottedOverlay:"none",
delay:9000,
navigation: {
keyboardNavigation: "on",
keyboard_direction: "horizontal",
mouseScrollNavigation: "off",
onHoverStop: "off",
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
},
arrows: {
style: "gyges",
enable: true,
hide_onmobile: false,
hide_onleave: false,
tmp: '',
left: {
h_align: "left",
v_align: "center",
h_offset: 10,
v_offset: 0
},
right: {
h_align: "right",
v_align: "center",
h_offset: 10,
v_offset: 0
}
},
bullets: {
enable: false,
hide_onmobile: false,
style: "gyges",
hide_onleave: false,
direction: "horizontal",
h_align: "center",
v_align: "top",
h_offset: 0,
v_offset: 20,
space: 5,
tmp: ''
}
},
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
responsiveLevels:[1240,1024,778,480],
gridwidth:[1240,1024,778,480],
gridheight:[868,768,960,720],
lazyType:"none",
shadow:0,
spinner:"off",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:1,
shuffle:"off",
autoHeight:"off",
fullScreenAlignForce:"off",
fullScreenOffsetContainer: "",
fullScreenOffset: "",
disableProgressBar:"on",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
}); /*ready*/
</script>
Thanks a bunch, I appreciate the help!

Sencha Touch JW Player not playing with multiple overlays

In My Sencha touch 2.0 app I am having an issue with a JW javascript video player not playing when there are two overlays up at the same time and I wanted to see if anyone could better elaborate on what is going wrong or what may be causing it so I can try and look around and try to figure out what is going on (i am new to sencha and javascript). I have the project loaded up at http://www.cox7.com/sean even tho it will only be run on an iPad.
Try the steps below to better see what I am talking about and also note that a lot of the jwplayer events are being logged in the javascript console so you can see whats going on......
1) click on any of the panels on the main page which will open a overlay with the video title description and a javascript video player. You will see that you can play the video.
2) do a search for "stem" in the search bar (top right corner of the main screen) this will then display a pannel with the search results.
3) click on any of the search results which will then open that same video player pannel but this time you will not be able to click the play button. It's almost like the pannel is not the top most element but I can still scroll and the onTouchStart event fires but the video never starts.
Anyone know what might be causing this? any help is much appreciated.
Here is my controller setup for the search result overlay....
showStreamSearchPopup: function showStreamPopup(list, index, node, record) {
//alert(record.get('title'));
//var record = getData().getStore().getAt(index);
StreamVideoSearchPlayerOverlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 200,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 200,
easing: 'ease-out'
},
centered: true,
width: '78%',
height: '68%',
styleHtmlContent: true,
listeners: {
painted: function() {
console.log('StreamVideoSearchPlayerOverlay painted');
},
activeitemchange :function() {
console.log('StreamVideoSearchPlayerOverlay activeitemchange');
}
},
items: [{
style: 'padding:1em;',
html:[ "<div class=\"postTitle\">",record.get('title'),"</div><div class=\"postDate\">Added on ",
record.get('date'),"</div><div class=\"postDesc\">",record.get('content'),"</div>"
].join("")
},
{
xtype: 'panel',
layout: 'card',
cls: 'videoPlayeriPad',
items:[{
xtype: 'jwplayer',
playerOptions: {
file: record.get('ipadvideo'),
image: record.get('poster'),
width: 500,
height: 281,
plugins: {
'gapro-1': { accountid: 'UA-23363754-1', idstring: '||title||' }
},
skin: 'http://www.cox7.com/wp-content/mediaplayer/skins/beelden/beelden/glow.xml',
}
}]
}
],
scrollable: true
}
);
StreamVideoSearchPlayerOverlay.show();
StreamVideoSearchPlayerOverlay.setActiveItem(2);
},
And here is my controller setup for the normal home screen asset overlay...
showStreamPopup: function showStreamPopup(list, index, node, record) {
//alert(record.get('title'));
//var record = getData().getStore().getAt(index);
StreamVideoPlayerOverlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 200,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 200,
easing: 'ease-out'
},
centered: true,
width: '78%',
height: '68%',
styleHtmlContent: true,
listeners: {
painted: function() {
console.log('StreamVideoPlayerOverlay painted');
},
activeitemchange :function() {
console.log('StreamVideoPlayerOverlay activeitemchange');
}
},
items: [{
style: 'padding:1em;',
html:[ "<div class=\"postTitle\">",record.get('title'),"</div><div class=\"postDate\">Added on ",
record.get('date'),"</div><div class=\"postDesc\">",record.get('content'),"</div>"
].join("")
},
{
xtype: 'panel',
layout: 'card',
cls: 'videoPlayeriPad',
items:[{
xtype: 'jwplayer',
playerOptions: {
file: record.get('ipadvideo'),
image: record.get('poster'),
width: 500,
height: 281,
plugins: {
'gapro-1': { accountid: 'UA-23363754-1', idstring: '||title||' }
},
skin: 'http://www.cox7.com/wp-content/mediaplayer/skins/beelden/beelden/glow.xml',
}
}]
}
],
scrollable: true
}
);
StreamVideoPlayerOverlay.setActiveItem(2);
StreamVideoPlayerOverlay.show();
}