Solved

Template website for playing video files (Avi or Flv)

Posted on 2011-03-20
8
439 Views
Last Modified: 2012-05-11
Hello, I am hoping somebody can provide me with a template that can be used to play video files on a web page.  I have little experience with creating websites, but I want to put some video files on a local network with an HTML index offering a brief description of the selected video file.

Can anyone help?

Bevo S.
0
Comment
Question by:Bevos
  • 4
  • 4
8 Comments
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 35177231
Hi Bevos,

You don't need a template so much as a web-based video player that you can then embed in a web page and use it to playback video.

I strongly recommend the JW Media Player:  http://www.longtailvideo.com/
0
 

Author Comment

by:Bevos
ID: 35177409
Thank you for the suggestion Jason.  I'll see if I can get this to work.
0
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 500 total points
ID: 35177429
Let me know if you have any issues with it and also be sure to check out their config wizard:

http://www.longtailvideo.com/support/jw-player-setup-wizard
0
 

Author Comment

by:Bevos
ID: 35225603
Hi Jason, I am getting a few problems.  I get some error when I try to preview my site "Video not found or Access Denied" but before this it was giving me many security prompts for Adobe Flash player.  Another issue I'm having is embedding this is a CSS accordian panel.  It will work in the first panel but the player doesn't even show up in other panels.  Here is an example of the code I'm using.

Any help would be very appreciated!

Bevo S.
<!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" />
<title>TV - Abstract </title>
<link href="css/Ryan.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	background-color: #000;
	background-image: url(images/bkgdHome.jpg);
}
</style>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="jwplayer/jwplayer.js"">
</script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>

<div class="container">
  <div class="header"><!-- end .header --><img src="images/TVTitle.jpg" width="800" height="100" /></div>
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="Abstract.html">Abstract</a></li>
      <li><a href="DataAbstraction.html">Abstraction</a></li>
      <li><a href="mailto:">Contact</a></li>
      <li></li>
    </ul>
    <p>&nbsp;</p>
    <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>Lessons: Abstract Screening</h1>
    <p>These lessons  </p>
    <p>&nbsp;</p>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Lesson 1: Introduction</div>
        <div class="AccordionPanelContent">
          <p>words.</p>
          <p>&nbsp;</p>
		  <script type='text/javascript' src='jwplayer/swfobject.js'></script>
<strong><div id="mediaspace"style="text-align:center"> </div></strong>
 
<script type='text/javascript'>
  var so = new SWFObject('jwplayer/player.swf','mpl','470','320','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','video/AbstractScreening/Lesson1.flv');
  so.write('mediaspace');
</script>
          <p>&nbsp;</p>
        </div>
</div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Lesson 2: Importingss</div>
        <div class="AccordionPanelContent">
		   <p>In  words words words</p>
		  <script type='text/javascript' src='jwplayer/swfobject.js'></script>
<strong><div id="mediaspace"style="text-align:center"> </div></strong>
 
<script type='text/javascript'>
  var so = new SWFObject('jwplayer/player.swf','mpl','470','320','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','video/AbstractScreening/Lesson2.flv');
  so.write('mediaspace');
</script>
          <p>&nbsp;</p>
        </div>
</div>
<div class="AccordionPanel">
        <div class="AccordionPanelTab">Lesson 3: Features</div>
        <div class="AccordionPanelContent">
          <p>Words words words</p>
          <p>
           		  <script type='text/javascript' src='jwplayer/swfobject.js'></script>
<strong><div id="mediaspace"style="text-align:center"> </div></strong>
 
<script type='text/javascript'>
  var so = new SWFObject('jwplayer/player.swf','mpl','470','320','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','video/AbstractScreening/Lesson3.flv');
  so.write('mediaspace');
</script>
          </p>
          <p>&nbsp; </p>
        </div>
      </div>
<div class="AccordionPanel">
        <div class="AccordionPanelTab">Lesson 4: Differences</div>
        <div class="AccordionPanelContent">
          <p>Words Words Words</p>
          <p>
            		  <script type='text/javascript' src='jwplayer/swfobject.js'></script>
<strong><div id="mediaspace"style="text-align:center"> </div></strong>
 
<script type='text/javascript'>
  var so = new SWFObject('jwplayer/player.swf','mpl','470','320','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','video/AbstractScreening/Lesson4.flv');
  so.write('mediaspace');
</script>
          </p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Lesson 5: Editing </div>
        <div class="AccordionPanelContent">
          <p>Words words words</p>
          <p>
                      		  <script type='text/javascript' src='jwplayer/swfobject.js'></script>
<strong><div id="mediaspace"style="text-align:center"> </div></strong>
 
<script type='text/javascript'>
  var so = new SWFObject('jwplayer/player.swf','mpl','470','320','9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('file','video/AbstractScreening/Lesson5.flv');
  so.write('mediaspace');
</script>
          </p>
          <p>&nbsp; </p>
        </div>
      </div>
    </div>
    <p>&nbsp;</p>
    <p><br />
      <br />
    </p>
<h1>&nbsp;</h1>
    <!-- end .content --></div>
  <!-- end .container --></div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 500 total points
ID: 35228365
>> I get some error when I try to preview my site "Video not found or Access Denied"

1. Make sure all of the videos are located in this path relative to the initial file:

video/AbstractScreening/

2. If this is a Windows web server, make sure .flv has a MIME type defined.

>> Another issue I'm having

Open a new question for any other issues.
0
 

Author Comment

by:Bevos
ID: 35229161
Hi Jason, the files are all located there.  I have not uploaded this to a web server yet and am trying to run these as a preview from my local machine.  Strangely it will work in dreamweaver when I do the preview as a 'device' but when I try in a browser (chrome or IE) it will not work.  Any thoughts?

Thanks so much,
Bevo S.
0
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 500 total points
ID: 35229220
Previewing from local will cause all kinds of weirdness to happen due to the paths, javascript and flash calls.  I would test from a real web server.
0
 

Author Comment

by:Bevos
ID: 35229334
Well, that is a problem for me because I'm just going to host this on a local network for some of my co-workers to see how to use a software. Any suggestions on how to make this work?
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now