I am trying to play embed videos in my webpage, in desktop browser there is no problem, but in mobile version I have these issues:
Video wont start automaticaly
There is Dailymotion logo in right bottom corner
I am using DM object provided by file https://api.dmcdn.net/all.js.
Code:
<script src="https://api.dmcdn.net/all.js"></script>
<script>
DM.init({
apiKey: 'correct api key',
status: true, // check login status
cookie: true // enable cookies to allow the server to access the session
});
</script>
<div id="player{$img->getId()}" class="dailymotion tile"></div>
<script>
$(function () {
var player{$img->getId()} = DM.player(document.getElementById("player{$img->getId()}"), {
{var DMurl = explode("/", $img->getImgUrl())}
video: {$DMurl[count($DMurl) - 1]},
width: "100%",
height: "100%",
params: {
autoplay: true,
mute: true,
endscreen-enable: false,
ui-logo: true,
controls: false
}
});
player{$img->getId()}.play();
});
</script>
My problem might be caused by syntax error in params (endscreen-enable and ui-logo, phpstorm is showing syntax error because of '-' char)
Video wont start automatically
=> this is normal on mobile devices, it will be the same for any video you add, from any provider. The reason is that most mobile devices prevent videos from being played automatically, hence the play must be triggered by a user interaction. This is detailed on Dailymotion developer website at : https://developer.dailymotion.com/player/faq#player-faq-autoplay-does-not-work-on-mobile
There is Dailymotion logo in right bottom corner
=> you pass ui-logo: true so this is normal !
Related
Has YouTube started locking down cross origin requests?
I am using a fullscreen autoplay hero video on my website and it has been functioning correctly for a long time. Within the last couple weeks it stopped working and I have the following error in the logs.
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://tbrogames.github.io').
Per the answer on this question
I tried changing the host between http and https to see if that would fix it and it didn't.
My website that throws the error: https://tbrogames.github.io/
I was able to find a bigger games website that also has this exact issue.
https://playbattlegrounds.com/main.pu
They are also using a youtube video as the hero/splash video; and it no longer functions, throwing the same error.
The relevant javascript can be found here
https://github.com/tbrogames/tbrogames.github.io/blob/master/js/defer.js
However, this was working for a long time and I didn't change any of the code. Which is why I'm thinking that it is a change that YouTube has made.
I think that error is actually misleading. I had the same issue, but I believe that it is actually chrome that is no longer autoplaying the hero. I get this error: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
The fix for me was calling mute on the video in Javascript Before playing the video. The iframe version of the embed with the same properties would not autoplay
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ythero', {
videoId: '3FjTef9gn3Q',
height: '100%',
width: '100%',
playerVars: {
rel: 0,
controls: 0,
showinfo: 0,
autoplay: 1,
loop: 1,
playlist: '3FjTef9gn3Q',
modestbranding: 1
},
events: {
'onReady': onPlayerReady,
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
</script>
YouTube does allow it. Make sure you are loading from a URL such as:
https://www.youtube.com/embed/HIbAz29L-FA?modestbranding=1&playsinline=0&showinfo=0&enablejsapi=1&origin=https%3A%2F%2Fintercoin.org&widgetid=1
Note the "origin" component, as well as "enablejsapi=1". The origin must match what your domain is, and then it will be whitelisted and work.
i have problem with jwplayer
problem if i open video at my script from phone it show youtube video page
how to hide this page and show only my page
my code for jwplayer
<script type="text/javascript">
jwplayer("container").setup({
file:"{$file_url}",
image: "{$file_image}",
autostart: "false",
aboutlink:"http://elfnoon.com",
abouttext:"elfnoon.CoM Player",
allowscriptaccess:"always",
height: {$height},
width: {$width},
logo: {
file: '{$siteurl}/player/logo.png',
link: '{$siteurl}',
position: 'bottom.right',
hide: 'false',
margin: '-35',
linktarget: '_blank',
hide: 'false',
over: '10',
out: '0.75'
},
wmode:"opaque",
volume:"100",
icons:"true",
bufferlength:"900",
related: {
file: '{$siteurl}/jw6-related.xml',
onclick: 'link'
},
modes:[
{ type:'html5' }
]
});
</script>
test link
with open page from cumputer it show my script normaly
but if from phone it show youtube page
same friends tell me use api but the script for public videos so not know how to make api for my site to embed video using my player with my settings
i forget , how i test my player using html5 because it show only swf version :(
same help plz?
If you use JW6, this should work - http://support.jwplayer.com/customer/portal/articles/1406725-youtube-video-embed
I'm trying to change over from flowplayer (current code below)
flowplayer("player", "http://churchwebsite.com/flowplayer-3.1.5.swf", {
clip: {
url: 'livestream',
live: 'true',
provider: 'influxis'
},
// streaming plugins are configured under the plugins node
plugins: {
influxis: {
url: 'http://churchwebsite.com/flowplayer.rtmp-3.1.3.swf',
netConnectionUrl:
'rtmp://stream.s22.cpanelservices.com/somethinglive'
This is what I'm switching to
jwplayer("myElement").setup({
file: "rtmp://stream.s22.cpanelservices.com/somethinglive",
autostart: true,
controls: true,
height: 600,
width: 800,
Here's the information I have, not sure what to put in where.
rtmp://stream.s22.cpanelservices.com/somethinglive
rtmp://churchwebsite.com/live
I'm using Adobe flash media encoder to stream, and through there it shows
FMS URL: rtmp://stream.s22.cpanelservices.com/somethinglive
Stream: livestream
A simple example of RTMP streaming:
In the <head> section:
<script type="text/javascript" src="jwplayer.js"</script>
In the <body> section:
<div id="#myElement">Loading the player...</div>
<script>
jwplayer("myElement").setup({
file: "rtmp://example.com/application/mp4:myVideo.mp4",
image: "/assets/myVideo.jpg",
height: 360,
width: 640
});
</script>
This assumes that the three JW Player script files (jwplayer.js. jwplayer.html5.js, and jwplayer.flash.swf) are in the same directory as your index.html. Otherwise, your src attribute needs to point to where you've actually stashed them. All three files need to be together, in any event.
The file attribute for the stream depends upon what, exactly, you're providing. See the JW Player configuration guide: http://support.jwplayer.com/customer/portal/articles/1430358-using-rtmp-streaming
I would like to embed an external website in my app, so I tried it with the tag here:
<iframe src="http://www.uniteich.at" frameborder="0" width="420" height="315"></iframe>
But I get the following error: "Unsafe JavaScript attempt to access frame with URL content://io.trigger.forge2dd999d0f14b11e1bc8612313d1adcbe/src/index.html from frame with URL http://www.uniteich.at/. Domains, protocols and ports must match."
So is there a good solution to embed a website in ios/android app with trigger.io?
Thanks in advance,
enne
EDIT: Ok, to make it more clear what I want: I would just like to load an external website as soon as a user clicks on a specific tabbar button at the bottom. I made this event-handler:
var dessertButton = forge.tabbar.addButton({
text: "Uniteich",
icon: "img/strawberry.png",
index: 2
}, function (button) {
button.onPressed.addListener(function () {
//LOAD EXTERNAL WEBSITE IN CONTENT CONTAINER HERE
});
});
Is that possible somehow?
This issue is cross domain requests. For more information read the same origin policy.
To get around this you will need to utilize forge.request. After adding www.uniteich.at to your config permissions first try the simple forge.get like this:
button.onPressed.addListener(function () {
var mainElement = document.getElementById("main");
forge.request.get("http://www.uniteich.at/index.html", function(content) {
mainElement.innerHTML = content;
},
function(error) {
mainElement.innerHTML = "<b>Error</b>" + error.message;
});
});
And if that does not work or not enough (I am not at my dev computer right now) you can utilize more options with forge.request.ajax.
I have a page that loads a jQuery UI Dialog with an iFrame in it. This iFrame has a login form, however I want a link in this iFrame that says "click here if you are a member" that they can click that will redirect the PARENT to a different page (and thereby close the modal).
Right now any links in the modal (and so in the iFrame) just redirects the iFrame)
Here is the code that calls the modal with the iFrame in it:
$(document).ready(function() {
$("#modalIframeId").attr("src","http://site.com/wordpress/register-now/?the_email_address=<?php echo $the_email_address; ?>");
$("#divId").dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
draggable: false,
resizable: false,
dialogClass: 'no-close',
height: 570,
width: 500,
title: 'Sign Up',
close: function(event, ui) { window.location.href = window.location.pathname; }
});
});
This is all within a Wordpress framework and the page that is called above has the form in it (that works) and the is where a need to have a link to redirect the parent to another page.
Any thoughts?
Thanks! Chris
I guess sometimes the old=school "lo-tech" way is the one we often forget. Found this thread:
Stack Overflow
Which reminded me that target="_top" would do what I needed...and it did. Tested in FF and Android and works well in both (wider testing expected to work well too).
Thanks