Am using JW player to play the video or audio. Before moving to S3 its works fine, after moved to Amazon s3 its not working, its giving error like Error loading media:file could not played before its works fine for me
Note: All my videos and audios are public in my Amazon s3
Here is my JW player configuration
Before s3
<script type="text/javascript">
jwplayer("myElement").setup({
file: "/videos/derbywire_2013-05-11_21_12_48__0000.mp4?1368306925",
height: 350,
width: 350
});
</script>
After s3
<script type="text/javascript">
jwplayer("myElement").setup({
file: "http://s3.amazonaws.com/derbywire_production/system/videos/52/original/derbywire_2013-05-11_21_12_48__0000.mp4?1368306925",
height: 350,
width: 350
});
</script>
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 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 !
I know that it is possible to get the number of concurrent viewers for a specific live streaming YouTube event with this link: https://www.youtube.com/live_stats?v={videoid}
I was wondering if is it possible to get the live_stats for a channel or playlist instead of a specific live event.
I want to embed this data in a webpage that will have multiple different live events occurring weekly. Changing the video id for each event will be a burden. If this can't be done directly, is there a way to get the video id of a current live event from a channel and use java script or php to replace the id in the link? Please help me figure this out.
After some time, I figured this out myself...
I created a PHP script that retrieves the video id of the first video in a playlist and puts the id into the live stats link. I take the link of live events and put them into a playlist for easy use.
<?php
// Retrieves video info from Youtube playlist. Just update [PLAYLIST_ID] and [API_KEY]
$json_url = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=1&playlistId=[PLAYLIST_ID]&fields=items%2Fsnippet%2FresourceId%2FvideoId&key=[API_KEY]";
$json = file_get_contents($json_url);
$json=str_replace('},
]',"}
]",$json);
$data = json_decode($json, true);
$videoId = $data['items'][0]['snippet']['resourceId']['videoId'];
$viewers = file_get_contents("https://www.youtube.com/live_stats?v=$videoId");
echo $viewers;
?>
I then created an HTML page where the data is dynamically updated using jQuery.
<html>
<body>
<div id="status" style="color: #666; line-height: 24px; font-size: 19px; font-weight: normal; font: 19px Roboto,arial,sans-serif;"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function update() {
$.ajax({
url: 'viewers.php',
dataType: 'text',
success: function(data) {
if (parseInt(data) == 0) {
$("#status").css({ display: "none" });
} else {
$("#status").text(parseInt(data) + ' watching now' );
}
}
})
}
update();
var statusIntervalId = window.setInterval(update, 5000);
</script>
</body>
</html>
This is how far I got. Now I am just wondering if there is a better way to combine these codes together to create less server requests. Each jQuery request happens every 5 seconds and is approximately 240 bytes is size. Even though the requests are small, they might still slow down a page.
If you can, please help me improve my solution. Thank you in advance.
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