|
JavaScript - Video Playlist Error
Hi there everyone I'm new here and to the world of coding in general. I have my own site now on it's third build. The second build was done by a someone else using ASP and database type things, which I don't really understand. Since I can no longer seem to contact him I'm trying to update the site myself but I'm having some trouble.
I have a page on my site which contains a flash video player with and xml based playlist, however when I access this page from my main computer the page produces an error message which reads 'playlist could not be loaded due to cross-domain policy restrictions'. If I add www. to the address then it works fine. I'm unsure of how to rectify this or whether it is a problem for anyone else viewing the site: williammorrismusic.com/video.asp Below is the code I have used for the player: Code: <script type='text/javascript' src='http://www.williammorrismusic.com/swfobject.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','640','560','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('playlistfile','http://www.williammorrismusic.com/playlist.xml');
so.addVariable('backcolor','000000');
so.addVariable('frontcolor','ffffff');
so.addVariable('lightcolor','ffffff');
so.addVariable('screencolor','000000');
so.addVariable('playlist','bottom');
so.write('mediaspace');
</script>
Any help on this would be most appreciated. Similar TutorialsHi there everyone I'm new here and to the world of coding in general. I have my own site now on it's third build. The second build was done by a someone else using ASP and database type things, which I don't really understand. Since I can no longer seem to contact him I'm trying to update the site myself but I'm having some trouble. I have a page on my site which contains a flash video player with and xml based playlist, however when I access this page from my main computer the page produces an error message which reads 'playlist could not be loaded due to cross-domain policy restrictions'. If I add www. to the address then it works fine. I'm unsure of how to rectify this or whether it is a problem for anyone else viewing the site: williammorrismusic.com/video.asp Below is the code I have used for the player: Code: <script type='text/javascript' src='http://www.williammorrismusic.com/swfobject.js'></script>
<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
var so = new SWFObject('player.swf','mpl','640','560','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('playlistfile','http://www.williammorrismusic.com/playlist.xml');
so.addVariable('backcolor','000000');
so.addVariable('frontcolor','ffffff');
so.addVariable('lightcolor','ffffff');
so.addVariable('screencolor','000000');
so.addVariable('playlist','bottom');
so.write('mediaspace');
</script>
Any help on this would be most appreciated. I've also posted this in the java section I think in error, if it is I apologize and please remove it. Hi all ! I was searching for this problem over and over in here adn other websites but coudn't find any solution. Ok here is the problem: I made a video playlist in XML. Here is how it looks like: Code: <videotemplate> <videoblock> <video id="1"> <title>test1</title> <src>sd.webm</src> <img>diagnoza.jpg</img> </video> <video id="2"> <title>test2</title> <src>video.webm</src> <img>resident.jpg</img> </video> <video id="3"> <title>test3</title> <src>sd.webm</src> <img>resident.jpg</img> </video> </videoblock> <videoblock> <video id="4"> <title>test4</title> <src>video11.webm</src> <img>resident.jpg</img> </video> <video id="5"> <title>test5</title> <src>video4.webm</src> <img>resident.jpg</img> </video> <video id="6"> <title>test5</title> <src>video5.webm</src> <img>resident.jpg</img> </video> </videotemplate> Them I am using this javascript + XLST to play next file: Code: <script type="text/javascript">
function nextSrc<xsl:value-of select="@id" />() {
var myvideo = document.getElementsByTagName('video')[0];
myvideo.src="file://d:/cis/guide/<xsl:value-of select="videoblock/video/following::src" />";
myvideo.load();
}
</script>
When I use nextSrc function video flips to next xml record with <src> tag but it only does that once! How to make it flip to next video every time ?? Please help ! Hello Everyone, Recently started using JW Player and I am very pleased so far! Did anybody have a script for making a playlist [xml file]. I hope to add java code or script (or html if possible) to play the playlist according to a schedule (year, month, day, hour, minute, second) so that, when a user opens the website, the correct video and, ideally, the correct point within the video, opens up according to the day, hour, and minute that the page is opened. This will give the impression of a "live" or "real time" broadcast. If any body could solve my problem I am very grateful to them. Hi, Is there any possibility of having the JW player playlist at the bottom. If possible can anyone post the javascript and its attribute for that. Thanks, Ananth On my music site, I want to keep track of the number of times each song has been played. The code below uses a clicked button to send the request. But I need to be able to send the request as each song begins to play. Or when a user clicks another song in the list. Mr Oldies online radio station I am using the audio.js script for the html5 audio player. That code is listed below as well. This code creates a division with the ID of "playing" for the active song. It is in here somewhere, where I would need to include the request to send the data to a php page which then does the work of accessing and updating a databse. I just do not know enough of Javascript to do this. Can someone show me where exactly to put the required code to do this? Thanks. Code: <!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>
audio.js code the other part of the audio.js script can be found here http://mroldies.net/test/audio.js Code: <script>
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
Hi, I currently created a video uploader, but when the video is too big in size, the page seems to be not doing any until the video is completely uploaded. I want to put somewhat like "loading.. please wait" script until the video is not completely uploaded. Thanks. //Ana Hi I am trying to implement a scroll to DIV (i.e. smooth scrolling with some easing) on various events in jPlayer, a javascript audio playlist. Essentially the playlist is in a scrolling DIV with scrollbars and mousewheel scrolling, and when the track changes I would like it to trigger a scroll to the currently playing track, i.e. the new track, such that it is centred vertically in the DIV (which has a variable height). I thought I would start first with trying to add some code to the #jplayer_next event which usually looks like this: Code: $("#jplayer_next").click( function() {
playListNext();
$(this).blur();
return false;
});
I came up with the following code to add: Code: $("#jplayer_playlist").scrollTop($(".jplayer_playlist_current").offset().top);
where #jplayer_playlist is the scrolling DIV and .jplayer_playlist_current is the class of the currently playing track. The code does do something, but I am seeing fairly nonsensical jumping around the div, which does seem somewhat related to the currently playing track, but certainly not what I am looking for. You can see the playlist here. The currently playing track is highlighted in green, and, when you click on the next button, the DIV certainly isn't scrolling smoothly to the currently playing track! If someone could help me amend the code to get this working properly I'd be grateful. Thanks, Nick I currently found a script that loads an ASX playlist dinamically, allowing the user to choose the item that he wants to watch in Windows media player embedded. The trouble is that once the user click on the link in the playlist it wont work. Take a look here http://tv.mghospedagem.com/wmp-pl3.html Works only on IE. Code: <head>
<script language="javascript1.2">
playListLoaded=false;
function loadPlayItems() {
df=document.getElementById("playItem");
dp=document.getElementById("playlist");
WMP9=document.getElementById("MediaPlayer1");
WMP9.url="http://tv.mghospedagem.com/play.asx";
WMP9.controls.play();
}
function showPlayItems() {
WMP9=document.getElementById("MediaPlayer1");
playlistItems=WMP9.currentPlaylist.count;
for (i=0; i<playlistItems; i++) {
playitem=document.createElement("a");
playnext=document.createElement("br");
playitem.setAttribute("href","#");
playitem.setAttribute("onclick","playItem("+i+")");
playitem.innerText=WMP9.currentPlaylist.item(i).name;
dp.appendChild(playitem);
dp.appendChild(playnext);
}
playListLoaded=true;
WMP9.controls.play();
}
function setPlayItem(index) {
WMP9=document.getElementById("MediaPlayer1");
playlistItems=WMP9.currentPlaylist.count;
if (playlistItems > 0) {
WMP9.controls.currentItem=WMP9.currentPlaylist.item(index);
WMP9.controls.play();
}
}
</script></head>
<body onLoad="loadPlayItems()">
<object id="MediaPlayer1"
classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
type="application/x-oleobject" width="600" height="400">
<param name="autostart" value="1">
<param name="showcontrols" value="1">
<param name="uimode" value="full">
<param name="stretchtofit" value="1">
<param name="enablecontextmenu" value="0">
</object>
<div id="playlist" style="position: absolute; top: 10px; left:
640px; visibility: visible; z-index: 999999999999999;">
<h2>Playlist</h2></div>
<script language="javascript1.2" for="MediaPlayer1"
event="playStateChange">
WMP9=document.getElementById("MediaPlayer1");
if (WMP9.playState==3 && ! playListLoaded) {
showPlayItems();
}
</script>
From an iframe, I want to load and play a playlist in a wimpy mp3 player in the parent page. I can do it as if it is a popup window but it requires that from one iframe, I reload the player in the other iframe. Here are the functions given by wimpy: Code: <script language="JavaScript" type="text/JavaScript">
<!--
var wimpyWindow;
var winOpen= 0;
function wimpyPopPlayer(wimpyPopPage,theWidth,theHeight) {
wimpyWindow = window.open(wimpyPopPage,'wimpyMP3player','width='+theWidth+',height='+theHeight);
winOpen=1;
}
function wimpyPopPlayerWithFile(wimpyPopPage,initialFile,theWidth,theHeight) {
wimpyWindow = window.open(wimpyPopPage+'?theFile='+initialFile,'wimpyMP3player','width='+theWidth+',height='+theHeight);
winOpen=1;
}
function wimpyIsOpen(){
if (winOpen==1){
if (wimpyWindow.closed){
return false;
} else {
return true;
}
} else {
return false;
}
}
function wimpyPopAndPlay(startOnLoad, theFile, theArtist, theTitle, graphicURL, hotlinkURL){
if(wimpyIsOpen()){
wimpyWindow.wimpy_addTrack(startOnLoad, theFile, theArtist, theTitle, graphicURL, hotlinkURL);
} else {
wimpyPopPlayerWithFile('home2.shtml',theFile,'325','350');
}
}
//-->
</script>
Is there a way to do it that targets the player in the iframe without treating it like a popup window? Any help greatly appreciated! Hello guys, I've made a music playlist where you should be able to listen to music (of course). All works fine, i am capable too listen to all the music in my playlist. But, when i reload my website and click on a song, it send me an error message - "Adobe Flash Player has stopped a potentially unsafe operation. If you want the program to communicate with Internet, click on settings." When i click on settings, i get another message - "Sorry, this page is not available". I had also another Option instead of settings which where, "ok". When i click on OK it works fine and it's no problem to scroll through the musiclist and listen to all of the soft songs. But i don't even want the message to appear from the very first time. Do you know what i should do to get rid of the message? Here's my code: Code:
<!--
BEGIN JAVASCRIPT PLAYER EMBED CODE
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<div id="player-holder"></div>
<script type="text/javascript">
var options = {};
options.playlistXmlPath = "playlist.xml";
var params = {};
params.allowScriptAccess = "always";
swfobject.embedSWF("OriginalMusicPlayerPlaylist.swf", "player-holder", "250", "250", "9.0.0",false, options, params, {});
</script>
<!-- END PLAYER EMBED CODE -->
Regards Webjoker I want to be able to have multiple video's available on our site from our local news station. I have two separate video's in the code but only one shows. I wanted to show a player for each one but it looks as though I can display one player and need to know how to have more than one load in the same player - one at a time. I hope this makes sense. I need to have links but not leave this page or player. You can view the code with two video links here http://www.cincinnatidesigns.com/wri...ing/w_news.htm Hey, I am making a website and need to make a video archive like on this website http://5secondfilms.com/films/ so the newest videos are first and it just automatically updates as a new video page is added. Also what would be the easiest way to create the new video pages? Just make the one and then copy the page, paste, then edit the paragraphs and link to the new video? All help appreciated, Thanks. Hey all. I want to figure out how to make a new video pop up like this site I'm about to show you. Go to this link, then click on "Watch HD Video". You see how a new video pops up in the same window? Basically I want to do EXACTLY that. I've taken a good hour trying to figure it out for myself; viewing their source codes, looking at their java scripts, but I just couldn't get it to work. If any of you know how to achieve the exact same thing on that site, please share your knowledge with me! Hey im having a problem putting a swf video in a website Code: <script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function showIt(){
var so = new SWFObject('./images/portfolio/tours/stoodly_pano/panoStudioViewer.swf',Stoodly','325','325','9');
so.addParam('allowscriptaccess','always');
so.addParam('bgcolor','#FFFFFF');
so.addParam('flashvars','file=stoodly2.xml&autostart=true');
so.write('portfolio-content');
}
</script>
With this code it shows a loading bar thats as far as it goes can anyone show me where i am going wrong I want to encrypt my video file and wants to give source url of that file in my web page and while before playing of that file on my web page I want enable password for authentication. How to do this? (Using javascript or html5 ) I would like multiple videos one one page. I tried to give each one an individual id but failed miserably. Also how on earth do I assign a image to each player. My example works with one player only and falls back to HTML5 video with no problems . If I decided on five videos per page, how do I apply an id to each one as well as a different image per player. Here is what I have so far: Code: <script type="text/javascript" src="video/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.src = "http://www.mysite.com.mp4";
flashvars.controlBarMode = "floating";
flashvars.poster = "http://mysite.com/imageonplayer.png";
var params = {};
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
var attributes = {};
attributes.id = "videoDiv";
attributes.name = "myDynamicContent";
swfobject.embedSWF("http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf", "videoDiv", "487", "275", "10.1.0","expressInstall.swf", flashvars, params, attributes);
</script>
</head>
Code: <div id="videoDiv"> <video controls="controls" poster="http://mysite.com/imageonplayer.png" width="487" height="275"> <source src="http://www.mysite.com/mymovie.mp4" type="video/mp4" /> <source src="http://www.mysite.com/mymovie.ogg" type="video/ogg" /> </video> </div> I assigned each player an individual id like this as suggested on another thread but that didn't work. Any suggestions? : Code: <script type="text/javascript">
swfobject.registerObject("videoDiv1", "10.1.0");
swfobject.registerObject("videoDiv2", "10.1.0");
swfobject.registerObject("videoDiv3", "10.1.0");
swfobject.registerObject("videoDiv4", "10.1.0");
</script>
Thanks Dan I am using joomla, and have a tabbed menu at the top, which has different articles embedded within. I have embedded a flash video inside each article. The problem is that if i play a video and then switch to the other tab (article) without pausing the video, the video keeps on playing. And if i try to play the video in the other article, then both videos start playing. I want to stop the first video from playing as soon as I switch to the new tab. There are a lot of different files which are included in the page, so If I know where to place a particular code within the source of the final rendered webpage, I will be able to place it at the right point in a particular file. thanks the website link is: http://tinyurl.com/ycg4tcm So I have been converting videos to mp4 and it is working fine (I can download the file and play it in wmp without a hitch) but when I try to use the html5 video tag by itself or with video js (videojs.com) enabled, the video only plays audio. It doesn't play any video. What could I possibly be doing wrong? Video: http://www.xonicgames.com/user/uploads/videos/6360.mp4 JS: http://xonicgames.com/video/?i=6 Thanks Hi, I started with the template on this site: http://www.pupinc.com/videobox/ However, I have about a dozen videos with more to come so I added a vertical scrollbar to navigate through the thumbnails. My problem is I don't know how to separate the main video player so that it doesn't scroll with the thumbnails. HTML: Code: <div id="middle4">
<div class="videobox" style="height: 360px; overflow-y: scroll;">
<ul>
<li><a href="http://www.youtube.com/watch?v=iFGEHtqNZis">TRS 50X35</a></li>
<li><a href="http://www.youtube.com/watch?v=9CaN2KBYpo8">98X104 Automobile Shredder</a></li>
<li><a href="http://www.youtube.com/watch?v=BWHXX6u3tVk">60x60 Aluminum</a></li>
<li><a href="http://www.youtube.com/watch?v=ZiWDKtdfqWQ">60X60 System</a></li>
<li><a href="http://www.youtube.com/watch?v=VMbbXcFju9E">Portable Shredding System</a></li>
<li><a href="http://www.youtube.com/watch?v=WEn5xtJwtu4">60X85 System</a></li>
<li><a href="http://www.youtube.com/watch?v=1cOxYQB5icg">60X60 White Goods</a></li>
</ul>
</div>
</div>
JS: Code: // Videobox object
VideoBox = Class.create();
VideoBox.prototype = {
// Initialize object.
initialize: function(index, item) {
this.index = index;
this.item = item;
this.item.addClassName('videoboxjs');
this.list = this.item.getElementsBySelector('ul')[0];
// Create div.bigvideo and add it just before the ul.
this.bigvideo = document.createElement('div');
Element.addClassName(this.bigvideo, 'bigvideo');
this.item.insertBefore(this.bigvideo, this.list);
// Create array of videothumbs.
this.thumbs = new Array;
// Opera 9 doesn't like 'li a' in getElementsBySelector, so you
// have to break it apart.
var links = this.item.getElementsBySelector('li');
for (var i=0; i < links.length; i++) {
this.thumbs[i] = new VideoThumb(index, i, links[i].getElementsBySelector('a')[0]);
}
// Load up the first video.
this.swap(0);
},
// Replace existing video with new one.
swap: function(index) {
// IE 6 won't show the video unless something else is in the box.
// I chose to add a <br /> which I hide via CSS.
this.bigvideo.innerHTML = '<br /><object width="425" height="350"><param name="movie" value="' + this.thumbs[index].video + '"></param><param name="wmode" value="transparent"></param><embed src="' + this.thumbs[index].video + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>';
// Deselect all the thumbnails.
this.thumbs.invoke('deselect');
// Select the current thumbnail.
this.thumbs[index].select();
}
};
// Videothumb object
VideoThumb = Class.create();
VideoThumb.prototype = {
// Initialize object.
initialize: function(boxindex, index, link) {
this.boxindex = boxindex;
this.index = index;
this.item = link;
this.href = this.item.getAttribute('href');
// Extract the v querystring value from the href. Youtube uses this
// value for everything.
this.videocode = this.href.toQueryParams().v;
// Direct link to the video for use in the object/embed
this.video = 'http://www.youtube.com/v/' + this.videocode;
// Create thumbnail image and append it inside the list item
var img = document.createElement('img');
img.src = 'http://img.youtube.com/vi/' + this.videocode + '/default.jpg';
img.alt = this.item.innerHTML;
img.title = this.item.innerHTML;
this.item.innerHTML = "";
this.item.appendChild(img);
// Observe the click event.
Event.observe(this.item, 'click', this.swap.bindAsEventListener(this));
},
swap: function(evt) {
// Call the swap method of the parent videobox with the thumbnail
// thumbnail index as a parameter.
aVB[this.boxindex].swap(this.index);
// Stop the event so the browser doesn't follow the link.
if (evt) {
Event.stop(evt);
}
},
select: function() {
this.item.addClassName('current');
},
deselect: function() {
this.item.removeClassName('current');
}
};
// Don't do anything if we're using Opera 8 or earlier.
if (!Prototype.Browser.Opera || (Prototype.Browser.Opera && navigator.userAgent.toLowerCase().charAt(navigator.userAgent.toLowerCase().indexOf('opera') + 6) > 8)) {
// Create array of videoboxes so you can have more than one on a page.
var aVB = new Array;
$$('div.videobox').each ( function(videobox, index) {
aVB[index] = new VideoBox(index, videobox);
});
}
|
|||||||