Playing video on a html with jquery

Report · Dec 21, 2011

Hi

I have a php/sql database that has thumb nails and videos in swf format and flv. On my html page I have an swf player. I have echoed

the thumbnails and have the url of the videos. How can I get the video url playing on the player after a person clicks the thumbnail with

out xml. Just by passing the url to the player. Kind of how youtube works thanks.

I have hand some sucess with xml passing but this can`t work in this aspect. So I have been investigating jquery and other alternatives.

Hope you can help.

Thanks.

Report · Dec 21, 2011

you're loading the xml with jquery but all the thumbnails are in your swf?

Report · Dec 22, 2011

Hi thanks for the reply.

Oh no. I have a folder Thumbnail and folder videos. I then have a phpmyadmin table called videos containing urls of the thumbnail and video.

On the html I echo the thumbnail of a particular video. the html contains a videoplayer with play, pause, stop menu. So I am trying to

use jquery to automaticly pass the url of the video into the videoplayer to play with out having to echo nessary xml maybe through

some actionscript that reads the passed url and plays the video.

I hope this makes sense thanks.

Report · Dec 22, 2011

what part of your project is in the swf? the video player with the play,pause,stop controls? so, only the video's url needs to be passed to the swf embedded in your html page?

Report · Dec 23, 2011

Thanks again for the reply.

so the videos are in two formats .flv and swf. So I can play an embedded swf video from the database but the video will play

with out controls play,pause or stop. It will just be a video embedded on the page. I created a separate player in flash cs5 that

has controls exported it as swf and embedded it on the page and know trying to pass the different video files from the datebase to be playable

with controls.

Thanks.

Report · Dec 23, 2011

in your html, add the following to your javascript/jquery:

function thisMovie(movieName) {

if (navigator.appName.indexOf("Microsoft") != -1) {

return window[movieName];

} else {

return document[movieName];

}

function sendToActionScript(flv) {

thisMovie("put_your_embedded_swfs_name_here_without_the_dot_swf").sendToActionScript(flv);

}

// when you want to pass the url to flash use:

sendToActionScript("yourflvname.flv");

////////////// and in your embedded swf with the player use:

import flash.External.ExternalInterface;

ExternalInterface.addCallback("sendToActionScript", playFLV);

function playFLV(flv):Void{

yourflv_pb.contentPath=flv;

//do whatever else

}

Report · Dec 26, 2011

Hi

Thanks so much for the assistance I have just got started getting the proposed solution working.

So in the swf players actionscript I have modified the code to:

//Action script

import flash.External.ExternalInterface;

ExternalInterface.addCallback("sendToActionScript", playFLV);

function playFLV(flv):Void{

yourflv_pb.contentPath=flv;

var flvSource:String = "yourflv_pb";

myVid.source=flvSource;

myVid.play();

}

myVid is the name of the player. I modified the code so that it plays the video is the code above correct?

I am still working on the rendering the whole solution.

thanks again for the help.

Report · Dec 26, 2011

are you using as2 or as3?

Report · Dec 26, 2011

Hi

I am using as3.

Report · Dec 26, 2011

1. you're posting in the as1/as2 forum

2. you should be seeing error messages IF you're using as3.

3. what's the name of the flv you're trying to play?

Report · Dec 26, 2011

Hi Thanks again for help.

I had just started coding the player part.

The name of the flv I would like to play is passed to the player using jquery.

So it would be

sendToActionScript("yourflvname.flv");

The variable contained in the above code.

The actionscript is supposed to read the variable and play it on myVid which is the variable name for the videoplayer object inside the flash.

I just turned the player to run with as1 and 2. So would:

//Action script

import flash.External.ExternalInterface;

ExternalInterface.addCallback("sendToActionScript", playFLV);

function playFLV(flv):Void{

yourflv_pb.contentPath=flv;

var flvSource:String = "yourflv_pb";

myVid.source=flvSource;

myVid.play();

}

Get the variable in the sendToActionScript("yourflvname.flv");

to play on myVid.play();

I modified the original actionscript code posted to get the passed video playing on the video component with instance name myVid.

Thanks.

Report · Dec 27, 2011

as2:

//Action script
import flash.External.ExternalInterface;
ExternalInterface.addCallback("sendToActionScript", playFLV);
function playFLV(flv):Void{
myVid.contentPath=flv;
myVid.play();
}

p.s. please mark/helpful/correct responses.

Report · Dec 27, 2011

Hi

Thanks again for the help. I am almost there. Just made a first try on my server but without any luck.

Below is the html and the actionscript is the same as you posted. When I click play button in the code

the Videos/teleme.flv is supposed to be then passed and played. Nothing happens. I think I messed up the jquery part any help

will be appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(document).ready(function() {

function thisMovie(movieName) {

if (navigator.appName.indexOf("Microsoft") != -1) {

return window[movieName];

} else {

return document[movieName];

}

function sendToActionScript(flv) {

thisMovie("JQplay").sendToActionScript(flv);

}

});

</script>

<title>Untitled Document</title>

</head>

<body>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
  <param name="movie" value="JQUERYPLAY/JQplay.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="swfversion" value="6.0.65.0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="Scripts/expressInstall.swf" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->

  <object type="application/x-shockwave-flash" data="JQUERYPLAY/JQplay.swf" width="550" height="400">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>

<br/>

<input type="button" value="play" onClick="sendToActionScript('Videos/teleme.flv');" />

</body>
</html>

Videos.teleme.flv is inside the JQUERYPLAY Folder when the swf is also contained. JQplay.php is in the main folder of the site.

thanks.

Report · Dec 27, 2011

try

Report · Dec 27, 2011

Hi

Just tried it no luck. Could they be an issue with the folder arragement? JQplay.php is in the main folder of server.

JQplay.swf is in JQUERYPLAY/

Videos/teleme.flv is inside JQUERYPLAY.

Hope you can assist.

Thanks again.

Report · Dec 27, 2011

put all your files in the same directory and test so you don't have any path issues. once you get that working you can work on setting up your files more conveniently.

Report · Jan 07, 2012

Hi

I recent but all the file in the same folder but with out any luck. I have gone over an over again on the code but can`t find any thing wrong.

I think part of the problem mite be the jquery. Could browser type affect the functionality.

If possible is they a way to try the same code on your machine and see how it goes it would be really helpful.

Thanks.

All the code is the same as we discussed on earlier posts.

Appreciate the help.

Report · Jan 07, 2012

it's very unlikely there's a problem with jquery. i have almost as much experience coding with jquery as i do with actionscript and i've found it to be very robust.

p.s. i only offer free help via the adobe forums. if you want me to test/correct your files, you'd need to hire me.

Report · Jan 07, 2012

Hi

Thanks so much again for the help. Really appreciate. Maybe I can upload the html page as it looks for a quick look. Maybe you mite notice

something.

So here goes as said earlier all file are in same folder including video:

video name: teleme.flv

player name: JQplay.swf with actionscript from earlier post.

// JQplay.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(document).ready(function() {

function thisMovie(movieName) {

if (navigator.appName.indexOf("Microsoft") != -1) {

return window[movieName];

} else {

return document[movieName];

}

function sendToActionScript(flv) {

thisMovie("JQplay").sendToActionScript(flv);

}

});

</script>

<title>Qplayer</title>

</head>

<body>

<div>

<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

</div>

</object>

</object>

swfobject.registerObject("FlashID");

</script>

<br/>

</body>

</html>

The actionscript loading flv into swf player:

//Action script MyVid is the player component instance

import flash.External.ExternalInterface;

ExternalInterface.addCallback("sendToActionScript", playFLV);

function playFLV(flv):Void{

myVid.contentPath=flv;

myVid.play();

}

Please reply if you find any thing out of place.

Report · Jan 07, 2012

i don't see where you're using jquery and there's faulty swfobject code. try:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
function thisMovie(movieName) {
         if (navigator.appName.indexOf("Microsoft") != -1) {
             return window[movieName];
         } else {
             return document[movieName];
         }
     }
     function sendToActionScript(flv) {
         thisMovie("JQplay").sendToActionScript(flv);
     }
</script>
<title>Qplayer</title>
</head>
<body>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
<param name="movie" value="JQplay.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />

<param name="expressinstall" value="expressInstall.swf" />


<object type="application/x-shockwave-flash" data="JQplay.swf" width="550" height="400">
    
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="expressInstall.swf" />
    
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.g if" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    
</object>

</object>
<br/>
<input type="button" value="play" onClick="sendToActionScript('teleme.flv');" />
</body>
</html>

Report · Jan 07, 2012

Hi

Thanks so much for the help. I am not sure what faulty swfobject code is but I just tried the code without no luck.

http://www.expishare.com/interactive/JQplay.html

or

http://www.expishare.com/interactive/JQplay.php

to check out. you can use view source to see code the teleme.flv is in same folder.

I am constantly trying out many things and hope to get lucky. Fingers crossed.

What debug method could I try like in actionscript to check if the variable arrived. Maybe a if statement or error check to verify that flash is recieving

the video?

Report · Jan 07, 2012

you must publish for fp 8 or better.

Report · Jan 08, 2012

Hi

fp 8 ? Is that frame rate?

Report · Jan 08, 2012

that's the flash player version. you're publishing for flash player 6 which does not support the externalinterface class.

Report · Jan 08, 2012

Hi

That really mite be the problem because the externalinterface class is in the actionscript. I tried modifying the publish settings which

say its flash player 12. I even tried to modify to flash player 8.

Is they a way I can modify the actionscript to work with current version or manual modify the version in the code>

Thanks.

Playing video on a html with jquery

1 Correct answer