I'm in PHP website. Am trying to play the video automatically in the flowplayer. but it is not working and not giving any problem
$(function(){
// Top Stories videos
var topStoriesVideos = [
{
sources: [
{
type: 'video/mp4',
src: "https://storage.googleapis.com/web-assets/videos/Youarewatchingtrd/ad2/Ad2/Ad2-360p.mp4"
}
]
},
];
PlaylistApi = flowplayer("#tv", { autoPlay: true,
playlist: topStoriesVideos,
});
})
flowplayer(function (api, root) {
api.on("load", function () {
}).on("ready", function () {
history.replaceState({}, '', x[count++]);
});
api.bind("finish", function(){
});
$("#pause").click(function(){
api.pause(function(){
})
})
});
I tried clip:{autoplay: true,},
But it is also not working
It should be autoplay: true instead of autoPlay: true
The 'P' shouldn't be capitalized.
Related
this is a additional question to a (solved) question I had here
I have managed to get video for my project working on mobile & desktop using the component from this glitch project
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
pause: function () {
window.removeEventListener('click', this.onClick);
},
onClick: function (evt) {
var videoEl = this.el.getAttribute('material').src;
if (!videoEl) { return; }
this.el.object3D.visible = true;
videoEl.play();
}
});
however, on mobile devices, a separate component to play sound from an entity is not working (it works on chrome and safari)
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
pause: function () {
window.removeEventListener('click', this.onClick);
},
onClick: function (evt) {
let entity = document.querySelectorAll('[sound]');
for (let item of entity) {
item.components.sound.playSound();
}
}
});
I am really confused, I have tried a few separate solutions but nothing seems to be working.
The only time I can get audio to play on mobile is by using this component however it is unsuitable as it only plays audio when the individual objects/entities are clicked, and I need all my sounds to play at once, by a click on the document window.
any help would be appreciated !!
EDIT
here is a code snippet of my project to show issue
UPDATE
I have managed to get the component working on mobile but now spatial sound is broken:
JS:
AFRAME.registerComponent('singleton-sound', {
schema: {
src: {type: 'string'},
autoplay: {default: false},
distanceModel: {default: 'inverse', oneOf: ['linear', 'inverse', 'exponential']},
loop: {default: false},
maxDistance: {default: 10000},
on: {default: ''},
poolSize: {default: 1},
positional: {default: true},
refDistance: {default: 1},
rolloffFactor: {default: 1},
volume: {default: 1}
},
multiple: true,
init: function () {
var audio = document.querySelector(this.data.src);
window.addEventListener('click', playIfFree);
// window.addEventListener('mouseenter', playIfFree);
audio.addEventListener('ended', function () {
window.isPlaying = true
})
function playIfFree () {
if(!window.isPlaying) {
audio.play();
window.isPlaying = false
} else {
return false
}
}
}
});
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('#overlay').style.display = 'flex';
document.querySelector('#overlay').addEventListener('click', function () {
let sounds = document.querySelectorAll('audio');
sounds.forEach (function (sound) {
sound.play();
sound.pause();
})
this.style.display = 'none';
})
});
HTML
<a-entity
gltf-model="#alice"
navigate-on-click="url: alice.html"
singleton-sound="
src: #aliceaudio;
volume: 1;
distanceModel: inverse;
rolloffFactor: 2"
position="-0.06 1.5 11.594"
rotation="90 180 0"
scale="0.4 0.4 0.4"
foo
></a-entity>
I successfully display real admob banner & interstitial ads with cordova-plugin-admob-free by placing onClick="admob.interstitial.show()" event in single-page document of my jquery mobile app but fail to get onClick="admob.rewardvideo.show()" to work unless I put id="showAd" within <a> attribute but that only work with the first <a> of all <a id="showAd"> attributes I put.
Is there codes I can put in my html document to get Admob Rewarded Video to work on cordova-plugin-admob-free?
This works : <a onClick="admob.interstitial.show(); ExitApp()" data-iconpos="notext" data-icon="delete" class="ui-btn-left">Close</a>
This doesn't work : Download PDF
These are codes inside basic.js that I included in my html :
var admobid = {}
if (/(android)/i.test(navigator.userAgent)) { // for android & amazon-fireos
admobid = {
banner: 'ca-app-pub-3940256099942544/6300978111',
interstitial: 'ca-app-pub-3940256099942544/1033173712',
}
} else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) { // for ios
admobid = {
banner: 'ca-app-pub-3940256099942544/2934735716',
interstitial: 'ca-app-pub-3940256099942544/4411468910',
}
}
document.addEventListener('deviceready', function() {
admob.banner.config({
id: admobid.banner,
isTesting: true,
autoShow: true,
})
admob.banner.prepare()
admob.interstitial.config({
id: admobid.interstitial,
isTesting: true,
autoShow: false,
})
admob.interstitial.prepare()
document.getElementById('showAd').disabled = true
document.getElementById('showAd').onclick = function() {
admob.interstitial.show()
}
}, false)
document.addEventListener('admob.banner.events.LOAD_FAIL', function(event) {
console.log(event)
})
document.addEventListener('admob.interstitial.events.LOAD_FAIL', function(event) {
console.log(event)
})
document.addEventListener('admob.interstitial.events.LOAD', function(event) {
console.log(event)
document.getElementById('showAd').disabled = false
})
document.addEventListener('admob.interstitial.events.CLOSE', function(event) {
console.log(event)
admob.interstitial.prepare()
})
And these are from mediation.js :
document.addEventListener('deviceready', function() {
admob.rewardvideo.config({
id: 'ca-app-pub-5123658954256325/6485882531',
isTesting: false,
autoShow: false,
})
admob.rewardvideo.prepare()
document.getElementById('showAd').disabled = true
document.getElementById('showAd').onclick = function() {
admob.rewardvideo.show()
}
}, false)
document.addEventListener('admob.rewardvideo.events.LOAD_FAIL', function(event) {
console.log(event)
})
document.addEventListener('admob.rewardvideo.events.LOAD', function(event) {
console.log(event)
document.getElementById('showAd').disabled = false
})
document.addEventListener('admob.rewardvideo.events.CLOSE', function(event) {
console.log(event)
admob.rewardvideo.prepare()
})
I am using the video.js player for my website. I want to change the position of control bar elements.
Presently, it shows play/pause, volume, progress bar and full screen.
How can I able to change order?
I have my code below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: true,
autoplay: true,
fluid: true,
controlBar: {
CurrentTimeDisplay: true,
TimeDivider: true,
DurationDisplay: true
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
......
I could able resolve by making changes as below:
var videojs = videojs('video-player', {
techOrder: ["youtube", "html5"],
preload: 'auto',
controls: video.player.controls,
autoplay: video.player.autoplay,
fluid: true,
controlBar: {
children: [
"playToggle",
"volumeMenuButton",
"durationDisplay",
"timeDivider",
"currentTimeDisplay",
"progressControl",
"remainingTimeDisplay",
"fullscreenToggle"
]
},
plugins: {
videoJsResolutionSwitcher: {
default: 'high',
dynamicLabel: true
}
}
}).ready(function() {
var player = this;
I thought it will help somebody in future.
Taken idea from JS Bin
For the latest version (v7.15.4), some of Sankar's options listed below have changed. After some hunting around I was able to find a list here on the video.js website under the Default Component Tree.
Also when enabling them, make sure that if you have a theme that it doesn't hide some of the options.
I'm using jQuery UI accordion for the first time and I have a question:
How I can delay the opening after all Ajax data is loaded?
Here is the accordion code:
var ac = $("#accordion").accordion(
{
active: false,
event: false,
autoHeight: false,
navigation: false
},
{ header: "table" }
);
I know I can start open animation in this function:
$(".SearchResults").load(
url,
{ input: id },
function () {
hideProgress();
}
);
After hideProgress it will run. How I can start opening?
Try moving the accordion initialisation to the callback, after hideProgress(), like this:
$(".SearchResults").load(
url,
{ input: id },
function () {
hideProgress();
var ac = $("#accordion").accordion(
{
active: false,
event: false,
autoHeight: false,
navigation: false
},
{ header: "table" }
);
}
);
I'm trying to create a popup page using Magnific via AJAX but getting an 'XMLHttpRequest cannot load' error when the link button is clicked.
Below is the partial code for the portfolio section where clicking on the button should load project_1.html:
<div class="masonry_items removeImgGrayFilter portfolio_items catFilterEffect_1 ajaxPopup_gallery" data-animated-time="15" data-animated-in="animated fadeIn" data-animated-innerContent="yes" data-anchor-to="parent.parent.parent">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<!-- Category 1 - jQuery -->
<!-- Thumbnail -->
<div class="item width_1by4 hover_enable cat1 selPopup">
<div class="item_thumbnail">
<div class="porImgOver">
<!-- Thumbnail Image -->
<img class="preload" src="images/0.png" data-src="images/portfolio/thumb1.jpg" alt="image_alt_text" />
</div>
<div class="imageText textOnHover">
<div class="text_field lightColorText">
<h5>Bloc Jams - jQuery</h5>
<h6>A fully functional digital music player similar to Spotify</h6>
<a class="detail_btn ajaxPopup_galItem" href="project_1.html">
<span class="icon"><i class="fa fa-search-plus"></i></span>
</a>
</div>
</div>
....
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/custom.min.js"></script>
custom.min.js
// magnificPopup plugin Initialization
try {
//Initialize Image
$('.magnificPopup').each(function() {
var mc = $(this);
var tit = mc.attr("data-title") !== undefined ? "data-title" : "title";
var typ = mc.attr("data-type") !== undefined ? mc.attr("data-type") : "image";
mc.magnificPopup({
image: {
titleSrc: tit
},
type: typ,
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
closeBtnInside: true,
midClick: false // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
//Initialize Gallery
$('.magnificPopup_gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled: true
},
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true, // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
// Initialize portfolio item gallery
$('.magnificPopup_item_gallery').each(function() {
var mc = $(this);
var p_items = [];
mc.find(".i_gallery").children().each(function() {
var mc2 = $(this);
var tit = mc2.attr("data-title") !== undefined ? mc2.attr("data-title") : mc2.attr("title");
p_items.push({
src: mc2.attr("data-href"),
title: tit,
type: mc2.attr("data-type")
});
});
mc.magnificPopup({
items: p_items, // the selector for gallery item
type: 'image', // this is default type
removalDelay: 500, //delay removal by X to allow out-animation
gallery: {
enabled: true
},
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
try {
// Initialize inline content
$('.magnificPopup_inline').magnificPopup({
type: 'inline',
callbacks: {
change: function() {
this.content.addClass("animated fadeInLeft");
},
},
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
} catch (e) {}
try {
// Initialize popup detail text
$('.detail_text').each(function() {
var cont = $(this).find(".popup_text");
$(this).find(".link_btn").magnificPopup({
items: {
src: cont,
type: 'inline'
},
removalDelay: 500, //delay removal by X to allow out-animation
closeOnContentClick: false,
midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}
$('.ajaxPopup_link').magnificPopup({
type: 'ajax',
settings: null,
alignTop: false,
cursor: 'mfp-ajax-cur',
closeOnContentClick: false,
closeBtnInside: true
});
try {
//Initialize Gallery
$('.ajaxPopup_gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: '.selPopup a.ajaxPopup_galItem', // the selector for gallery item
type: 'ajax',
settings: null,
alignTop: true,
cursor: 'mfp-ajax-cur',
gallery: {
enabled: true
},
closeOnContentClick: false,
midClick: true, // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});
});
} catch (e) {}