Highlighted

Update iWeb videos?

Explorer ,
Feb 08, 2018

Copy link to clipboard

Copied

Hi. Back in 2009 I authored a website using the click and drag (really easy) methods in iWeb. iWeb is no longer supported by Apple and my videos are no longer HTML5 compliant. Here is an example of the source code for one of my videos:

<div id="id25" style="height: 207px; left: 563px; position: absolute; top: 7324px; width: 354px; z-index: 1; " class="style_SkipStroke shape-with-text">
   <div class="text-content graphic_textbox_layout_style_default_External_354_207" style="padding: 0px; ">
   <div class="graphic_textbox_layout_style_default">
   <p style="padding-top: 0pt; " class="paragraph_style_14"> The Busters - 1997<br /></p>
   <p class="paragraph_style_14"><br /></p>
   <p class="paragraph_style_9"><span class="style_2">Ok, this is a different song, but it shows the extent to which the term, “Rum and Coca Cola” is recognized all over the world as a shorthand description of tropical pleasures.<br /></span></p>
   <p class="paragraph_style_9"><br /></p>
   <p class="paragraph_style_4">This clip features some very nice horn work from this German ska band at the E-Werk concert in Cologne.<br /></p>
   <p class="paragraph_style_4"><br /></p>
   <p style="padding-bottom: 0pt; " class="paragraph_style_4">When I’m depressed I listen to this version. Snaps me right out of it.</p>
   </div>
   </div>
   </div>

I understand I need to use the <video> tag to be HTML5 compliant. Can anyone suggest a shortcut way to update the video? Thanks.

Kevin Burke

Cambridge, Massachusetts

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Apple discontinued their QuickTime player plugin because modern  browsers no longer support it.

Apparently, your media source is coming from JavaScript.

<script type="text/javascript"><!--

writeMovie39();
-->
</script>

With this as the result:

<object id="id95" type="video/quicktime" data="Media/le%20chat%20mort.mp4" style="height: 256px; left: 554px; position: absolute; top: 11295px; width: 320px; z-index: 1; " width="320" height="256"><param name="src" value="Media/le%20chat%20mort.mp4"><param name="controller" value="true"><param name="autoplay" value="false"><param name="scale" value="tofit"><param name="volume" value="100"><param name="loop" value="false"></object>

You would need to remove all instances of the JavaScript and replace it with <video> or <audio> tags as follows:

<video control="control">

<source poster="YOUR_POSTER_IMAGE.png" src="Media/le%20chat%20mort.mp4" type="video/mp4">

</video>

<audio controls>

<source src="YOUR_AUDIO.mp3" type="audio/mp3">

</audio>

Views

820

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Update iWeb videos?

Explorer ,
Feb 08, 2018

Copy link to clipboard

Copied

Hi. Back in 2009 I authored a website using the click and drag (really easy) methods in iWeb. iWeb is no longer supported by Apple and my videos are no longer HTML5 compliant. Here is an example of the source code for one of my videos:

<div id="id25" style="height: 207px; left: 563px; position: absolute; top: 7324px; width: 354px; z-index: 1; " class="style_SkipStroke shape-with-text">
   <div class="text-content graphic_textbox_layout_style_default_External_354_207" style="padding: 0px; ">
   <div class="graphic_textbox_layout_style_default">
   <p style="padding-top: 0pt; " class="paragraph_style_14"> The Busters - 1997<br /></p>
   <p class="paragraph_style_14"><br /></p>
   <p class="paragraph_style_9"><span class="style_2">Ok, this is a different song, but it shows the extent to which the term, “Rum and Coca Cola” is recognized all over the world as a shorthand description of tropical pleasures.<br /></span></p>
   <p class="paragraph_style_9"><br /></p>
   <p class="paragraph_style_4">This clip features some very nice horn work from this German ska band at the E-Werk concert in Cologne.<br /></p>
   <p class="paragraph_style_4"><br /></p>
   <p style="padding-bottom: 0pt; " class="paragraph_style_4">When I’m depressed I listen to this version. Snaps me right out of it.</p>
   </div>
   </div>
   </div>

I understand I need to use the <video> tag to be HTML5 compliant. Can anyone suggest a shortcut way to update the video? Thanks.

Kevin Burke

Cambridge, Massachusetts

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

Apple discontinued their QuickTime player plugin because modern  browsers no longer support it.

Apparently, your media source is coming from JavaScript.

<script type="text/javascript"><!--

writeMovie39();
-->
</script>

With this as the result:

<object id="id95" type="video/quicktime" data="Media/le%20chat%20mort.mp4" style="height: 256px; left: 554px; position: absolute; top: 11295px; width: 320px; z-index: 1; " width="320" height="256"><param name="src" value="Media/le%20chat%20mort.mp4"><param name="controller" value="true"><param name="autoplay" value="false"><param name="scale" value="tofit"><param name="volume" value="100"><param name="loop" value="false"></object>

You would need to remove all instances of the JavaScript and replace it with <video> or <audio> tags as follows:

<video control="control">

<source poster="YOUR_POSTER_IMAGE.png" src="Media/le%20chat%20mort.mp4" type="video/mp4">

</video>

<audio controls>

<source src="YOUR_AUDIO.mp3" type="audio/mp3">

</audio>

Views

821

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 08, 2018 0
Adobe Community Professional ,
Feb 09, 2018

Copy link to clipboard

Copied

Copy & paste this code into a new, blank document.  The Play Button is an SVG overlay.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Video Demo</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>

.video-wrapper { position: relative; }

.video-wrapper > video {

    width: 100%;

    vertical-align: middle;

}

.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {

display: none;

}

.video-overlay-play-button {

    box-sizing: border-box;

    width: 100%;

    height: 100%;

    padding: 10px calc(50% - 50px);

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    opacity: 0.95;

    cursor: pointer;

    background-image: linear-gradient(transparent, #000);

    transition: opacity 150ms;

}

.video-overlay-play-button:hover { opacity: 1; }

.video-overlay-play-button.is-hidden { display: none; }

</style>

</head>

<body>

<div class="video-wrapper">

<!--CHANGE MP4 AND POSTER IMAGE TO YOUR OWN-->

<video src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/poster.png"></video>

</div>

<script>

var videoPlayButton,

videoWrapper = document.getElementsByClassName('video-wrapper')[0],

video = document.getElementsByTagName('video')[0],

videoMethods = {

renderVideoPlayButton: function() {

if (videoWrapper.contains(video)) {

this.formatVideoPlayButton()

video.classList.add('has-media-controls-hidden')

videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]

videoPlayButton.addEventListener('click', this.hideVideoPlayButton)

}

},

formatVideoPlayButton: function() {

videoWrapper.insertAdjacentHTML('beforeend', '\

<svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\

<circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\

<polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\

</svg>\

')

},

hideVideoPlayButton: function() {

video.play()

videoPlayButton.classList.add('is-hidden')

video.classList.remove('has-media-controls-hidden')

video.setAttribute('controls', 'controls')

}

}

videoMethods.renderVideoPlayButton()

</script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 09, 2018 1
Explorer ,
Feb 09, 2018

Copy link to clipboard

Copied

Hi, Nancy

Thank you as always. My problem is that I am a web developer only a couple days out of the year and I forget everything I learned the year before. A recipe for disaster. I am a historian and musicologist.

I don't get what you mean by starting a "new, blank document". I don't want a new document. I want to correct my current document. It would take months if not years to recreate my site from scratch. (www.rumandcocacolareader.com)

Let me restate the problem: I have a huge academic website authored in iWeb. It has about 40 video and sound files. These files can no longer be read by modern browsers. According to Apple I have to go into the code and change the <embed> tag to the <video> tag in order to be HTML compliant, but when I look at the code I can't see any <embed> tags!

My basic strategy (I think) should be to copy all the code from the old iWeb site, paste it into a new Dreamweaver document and then go about changing the code one tag at a time to make the videos and sound files HTML compliant - right?

K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 09, 2018 0
Adobe Community Professional ,
Feb 09, 2018

Copy link to clipboard

Copied

iWeb didn't generate great code.  And what you've posted contains no reference to video.  It's just CSS and paragraph text.    The code I posted above is an HTML5 document with a responsive video. 

<!--CHANGE MP4 AND POSTER IMAGE TO YOUR OWN-->

<video src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/poster.png"></video>

\

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 09, 2018 0
Explorer ,
Feb 09, 2018

Copy link to clipboard

Copied

Hi, Nancy

I'm still looking for a solution.

iWeb didn't generate great code.

Ok, but iWeb allowed millions of us to put our hearts and ideas on the web without getting bogged down in code. The internet is a channel, not an obstacle. Have you seen my site?

And what you've posted contains no reference to video.  It's just CSS and paragraph text.  

Right! Where the heck is the video or the imbed?

The code I posted above is an HTML5 document with a responsive video.

Yes but I can do that by starting from scratch in Dreamweaver. But how do I retrofit my iWeb code? there must be millions of people in the same boat. I have looked at lots of tutorials but they all reference third party apps which have their own learning curve.

Best wishes,

K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 09, 2018 0
Adobe Community Professional ,
Feb 09, 2018

Copy link to clipboard

Copied

I usually upload the video to YouTube and embed it into my document like

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Untitled Document</title>

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body class="container">

<div class="embed-responsive embed-responsive-16by9">

  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>

</div>

</body>

</html>

Copy and paste the above into a new document and view in browser.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 09, 2018 0
Adobe Community Professional ,
Feb 10, 2018

Copy link to clipboard

Copied

KevinB9  wrote

Right! Where the heck is the video or the imbed?

It should be in your source code.   What's the URL to one of your problem pages?

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 10, 2018 0
Explorer ,
Feb 11, 2018

Copy link to clipboard

Copied

Hi, Nancy

Here is the link:  versions

Some of the files are MP4's and some are audio files. Let me know if you can see and hear them.

I can tell you this - if you go to the trouble of restoring "disabled internet files" as recommended by Apple, you will be able to hear them, but I can't expect all my readers to take the time and trouble to do this.

Once again, my goal is to rebuild this site using Dreamweaver.

Thanks.

K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2018 0
Adobe Community Professional ,
Feb 11, 2018

Copy link to clipboard

Copied

Apple discontinued their QuickTime player plugin because modern  browsers no longer support it.

Apparently, your media source is coming from JavaScript.

<script type="text/javascript"><!--

writeMovie39();
-->
</script>

With this as the result:

<object id="id95" type="video/quicktime" data="Media/le%20chat%20mort.mp4" style="height: 256px; left: 554px; position: absolute; top: 11295px; width: 320px; z-index: 1; " width="320" height="256"><param name="src" value="Media/le%20chat%20mort.mp4"><param name="controller" value="true"><param name="autoplay" value="false"><param name="scale" value="tofit"><param name="volume" value="100"><param name="loop" value="false"></object>

You would need to remove all instances of the JavaScript and replace it with <video> or <audio> tags as follows:

<video control="control">

<source poster="YOUR_POSTER_IMAGE.png" src="Media/le%20chat%20mort.mp4" type="video/mp4">

</video>

<audio controls>

<source src="YOUR_AUDIO.mp3" type="audio/mp3">

</audio>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 11, 2018 1
KevinB9 LATEST
Explorer ,
Feb 12, 2018

Copy link to clipboard

Copied

Hi, Nancy

I think you are right about the Javascript. Thank you. I will try the fix as you suggest.

Best wishes,

Kevin

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2018 0