Resolved Adding video into my html file [Archive]

View Full Version : Resolved Adding video into my html file

theremotedr

12-14-2015, 03:23 PM

Hi,
I wish to make an edit into my file.
Currently i use 2 photos within the code below BUT i would like the lower 640 x 480 box to show a video now.
I am not to sure how i would add the code that ive found on the internet into my existing code in use.
Please could you advise.

Current code with 2 images.


<style>
#container{
width: 800px;
margin: 20px auto 20px auto;
}
#header{
width: 750px;
height: 100px;
margin: 50px auto;
}
.ebayimagetop, .ebayimagebottom{
width:640px;
height:250px;
margin:5px auto;
border: 4px #000099 solid;
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.50), 0 0 40px rgba(0, 0, 0, 0.08) inset;
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.50), 0 0 40px rgba(0, 0, 0, 0.08) inset;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.50), 0 0 40px rgba(0, 0, 0, 0.08) inset;
}

.highlight{
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
}
#textarea{
width:640px;
margin:5px auto;
text-align: center;
color:#000099;
}
#textarea p{
text-align: center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 30px;
}
body{
background-image: url(http://www.theremotedoctor.co.uk/ebay/Background1600x1400.jpg);
background-repeat: no-repeat;
}
.alert{
color:#FF0000;
font-weight:bold;
}
.box {
background-color: #999999;
width:640px;
margin:5px auto;
border: 4px #000099 solid;
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.50), 0 0 40px rgba(0, 0, 0, 0.08) inset;
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.50), 0 0 40px rgba(0, 0, 0, 0.08) inset;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.50), 0 0 40px rgba(0, 0, 0, 0.08) inset;
}
</style>
<title>VIDEO</title>
<div id="container">

<div id="header"><img src="http://i670.photobucket.com/albums/vv62/ipbr21054/IVYLODGESALES/logo.jpg" alt="logo" height="100" width="750"></div>

<div class="ebayimagetop"><img src="http://i670.photobucket.com/albums/vv62/ipbr21054/EBAYLOGOS/awaiting_image.jpg"></div>

<div class="ebayimagebottom"><img src="http://i670.photobucket.com/albums/vv62/ipbr21054/EBAYLOGOS/awaiting_image.jpg"></div>

<div id="textarea" class="box">
<p>TEXT</p>
<p>TEXT</p>
<p class="highlight">TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p class="alert">TEXT</p>
<p>TEXT</p>
</div>
</div>

Here is the code that i would like added.

<p align=”center”>
<object height=”480? width=”640?><param
name=”movie”
value=”http://vid670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/TEST.mp4”><param
name=”allowFullScreen” value=”true”><param
name=”allowscriptaccess” value=”always”>
<embed src=”http://vid670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/TEST.mp4”
type=”application/x-shockwave-flash” allowscriptaccess=”always”
allowfullscreen=”true” height=”480? width=”640?></object></span></strong></p>

Beverleyh

12-14-2015, 05:27 PM

That's a very old video embed code. Aside from the syntax errors, I doubt it would work on iDevices. Is there any reason why you aren't using an HTML5 video element? If you haven't already, look into that. Alternatively, look for an HTML5 video player script with Flash fallback for old browsers.

Whichever code you opt for, try putting it into the markup where you want it to appear - instead of the img or whatever element you want the video to replace (it currently isn't clear which element holds the 640 X 480px image). Then if it doesn't 'work' as expected, post a link to the page in question explaining why it isn't working, what is actually happening and what behaviour you expect it to/would like it to adopt instead. Also indicate clearly what you've tried on your own to remedy the problem.

Once you provided further information, somebody can take a look and make suggestions to help.

coothead

12-14-2015, 05:50 PM

Hi there theremotedr,

try it like this...

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>VIDEO</title>

<style>
body {
background-image: url(http://www.theremotedoctor.co.uk/ebay/Background1600x1400.jpg);
background-repeat: no-repeat;
}
#container {
width:800px;
margin:20px auto;
}
#header {
width:750px;
height:100px;
margin:50px auto;
}
.ebayimagetop, .ebayimagebottom {
width:640px;
margin:5px auto;
border:4px solid #009;
box-shadow:2px 2px 8px rgba(0,0,0,0.50),0 0 40px rgba(0,0,0,0.08) inset;
}
.ebayimagebottom video {
display:block;
width:640px;
height:360px;
}
#textarea {
width:640px;
margin:5px auto;
text-align:center;
color:#009;
}
#textarea p {
text-align:center;
font-family:'trebuchet ms',arial,helvetica,sans-serif;
font-size:20px;
line-height:30px;
}
.box {
background-color:#999;
width:640px;
margin:5px auto;
border: 4px solid #009;
box-shadow:2px 2px 8px rgba(0,0,0,0.50),0 0 40px rgba(0,0,0,0.08) inset;
}
.highlight {
color:#fff;
font-weight:bold;
font-size:18px;
}
.alert {
color:#f00;
font-weight:bold;
}
</style>

</head>
<body>
<div id="container">

<div id="header">
<img src="http://i670.photobucket.com/albums/vv62/ipbr21054/IVYLODGESALES/logo.jpg" height="100" width="750" alt="logo">
</div>

<div class="ebayimagetop">
<img src="http://i670.photobucket.com/albums/vv62/ipbr21054/EBAYLOGOS/awaiting_image.jpg" alt="">
</div>

<div class="ebayimagebottom">
<video autoplay loop>
<source src="http://vid670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/TEST.mp4" type="video/mp4">
</video>
</div>

<div id="textarea" class="box">
<p>TEXT</p>
<p>TEXT</p>
<p class="highlight">TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p class="alert">TEXT</p>
<p>TEXT</p>
</div>

</div>

</body>
</html>

coothead

theremotedr

12-14-2015, 06:25 PM

Coothead thats spot on.
Many thanks for helping thats what i needed but its looping.
How is a play button added so when the page is first viewed the customer can then press play etc

coothead

12-14-2015, 07:00 PM

Hi there theremotedr,

use this amended code...

<video controls poster="test.jpg">
<source src="http://vid670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/TEST.mp4" type="video/mp4">
</video>
...and the attached image for the...

"poster" attribute.

coothead

theremotedr

12-14-2015, 07:10 PM

Cheers coothead,you know your stuff.
Thats spot on.
Just what i required.

Maybe you could also take a look here if you have some spare time,much appreciated.

http://www.dynamicdrive.com/forums/showthread.php?79203-Another-video-challenge-im-stuck-with-but-half-way-there&p=315338#post315338

theremotedr

12-22-2015, 04:49 PM

Here is the page in question
http://www.ebay.co.uk/itm/401041830465?ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649

The video ends and stays on the last frame.
Where would i need to apply the code below "if correct for this page" so the video returns to the start again like my other post.

<script>
'use strict';
(function() {
document.getElementById('myvideo3').onended=function() {
this.load();
};
})();
</script>

As this is ebay im not sure if they will allow the script ?
I will find out once advised on the correct place to add it.

coothead

12-22-2015, 05:25 PM

Hi there theremotedr,

I know nothing about "eBay" limitations, but you could try using this...

<video controls poster="test.jpg" onended="this.load()">
<source src="http://vid670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/honda_flip_upgrade.mp4">
</video>
...which, is not how I would like to code, but....

coothead

theremotedr

12-22-2015, 05:49 PM

Hi,
That works fine.
Question "i know you dont have iphone"
Using the iphone,if i go to the listing and play the video the whole page,video images etc are huge and need to manually resize the page.

Having said that also on the iphone if i click the link to the page all is perfect.
Wonder why this is as its the same page at the end of the day.
No problem just thought i would mention it.

Thanks and happy xmas.

coothead

12-22-2015, 06:09 PM

Hi there theremotedr,

Fortunately, for me anyway, I do not have any kind of mobile phone. :)

My land line fills all of my communication needs.

Perhaps Beverley can help you with your "iPhone" problems.

coothead