Hi all,
I have a pretty basic HTML question, I think.
I want to embed a couple of MP4 videos in an HTML file. Using something like the following code, I can do this relatively easily:
<div class="figure" id="d0e690"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640"> <param name="src" value="Pictures/Movie1.m4v"/> <param name="autoplay" value="true"/> <embed src="Pictures/Movie1.m4v" type="image/x-macpaint" pluginspage="http://www.apple.com/quicktime/download" autoplay="true" height="480" width="640"> </object> </div>
The trouble is that Movie1 is 30 odd megabytes and there are other movies in the file. So I'd rather use a place holder. Googling around I discovered that the recommended way of doing this is to make a 1 frame movie saying something like "click on me" which you put on the src attribute, and then you add an href attribute with the name of the "real" movie. If you add target="_self" it is supposed to replace the place holder with the longer movie. This would be the code:
<div class="figure" id="d0e690"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640" href="Pictures/Movie1.m4v" target="_self"> <param name="src" value="Pictures/Movie1poster.m4v"/> <param name="autoplay" value="true"/> <embed src="Pictures/Movie1poster.m4v" type="image/x-macpaint" pluginspage="http://www.apple.com/quicktime/download" autoplay="true" height="480" width="640" href="Pictures/Movie1.m4v" target="_self"/> </object> </div>
The problem is that Firefox at any rate seems to understand the src attribute as a base URL. If I click on the player and copy the URL that is produced or look at it in a full screen, Firefox is looking for the href video at
Pictures/Movie1poster.m4v/Pictures/Movie1.m4v
instead of
Pictures/Movie1.m4v
I've tried everything I can think of to get around this: moved the files into the root directory of the page, added ../ to the href to try and get it to back up a directory. Nothing seems to work. Since this is a very common thing on the internet, I must be doing something stupid. Does anybody know how to do it?
Dear Prof. O'Donnell,
This doesn't directly address your problem, but should get you around it entirely: using the <video> tag, it's now possible to embed video in a page without using the QuickTime plug-in. There's an excellent discussion of this at http://diveintohtml5.org/video.html. There are also pre-made video players using this technique at http://videojs.com/, http://mediaelementjs.com/, and http://www.jplayer.org/. In addition to having a working video player, your video should be more compatible with future browsers, and will also work on mobile devices.
Hope that helps,
Andrew Dunning PhD Student Collaborative Program in Editing Medieval Texts Centre for Medieval Studies University of Toronto
On Wed, Jul 27, 2011 at 9:53 PM, O'Donnell, Dan daniel.odonnell@uleth.ca wrote:
Hi all,
I have a pretty basic HTML question, I think.
I want to embed a couple of MP4 videos in an HTML file. Using something like the following code, I can do this relatively easily:
<div class="figure" id="d0e690"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640"> <param name="src" value="Pictures/Movie1.m4v"/> <param name="autoplay" value="true"/> <embed src="Pictures/Movie1.m4v" type="image/x-macpaint" pluginspage="http://www.apple.com/quicktime/download" autoplay="true" height="480" width="640"> </object> </div>
The trouble is that Movie1 is 30 odd megabytes and there are other movies in the file. So I'd rather use a place holder. Googling around I discovered that the recommended way of doing this is to make a 1 frame movie saying something like "click on me" which you put on the src attribute, and then you add an href attribute with the name of the "real" movie. If you add target="_self" it is supposed to replace the place holder with the longer movie. This would be the code:
<div class="figure" id="d0e690"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640" href="Pictures/Movie1.m4v" target="_self"> <param name="src" value="Pictures/Movie1poster.m4v"/> <param name="autoplay" value="true"/> <embed src="Pictures/Movie1poster.m4v" type="image/x-macpaint" pluginspage="http://www.apple.com/quicktime/download" autoplay="true" height="480" width="640" href="Pictures/Movie1.m4v" target="_self"/> </object> </div>
The problem is that Firefox at any rate seems to understand the src attribute as a base URL. If I click on the player and copy the URL that is produced or look at it in a full screen, Firefox is looking for the href video at
Pictures/Movie1poster.m4v/Pictures/Movie1.m4v
instead of
Pictures/Movie1.m4v
I've tried everything I can think of to get around this: moved the files into the root directory of the page, added ../ to the href to try and get it to back up a directory. Nothing seems to work. Since this is a very common thing on the internet, I must be doing something stupid. Does anybody know how to do it?
Daniel Paul O'Donnell, PhD Professor of English, University of Lethbridge Co-President, Society for Digital Humanities/Société pour l'étude des médias interactifs Co-Editor, Digital Studies/Le champ numérique Founding Editor, Digital Medievalist Digital Medievalist -- http://www.digitalmedievalist.org/ Journal: http://www.digitalmedievalist.org/journal/ Journal Editors: editors _AT_ digitalmedievalist.org News: http://www.digitalmedievalist.org/news/ Wiki: http://www.digitalmedievalist.org/wiki/ Twitter: http://twitter.com/digitalmedieval Facebook: http://www.facebook.com/group.php?gid=49320313760 Discussion list: dm-l@uleth.ca Change list options: http://listserv.uleth.ca/mailman/listinfo/dm-l
I maybe should have put a time-line filter on my googling: I thought something was up when the code all came back uppercase and without quotation marks on the attributes ;) It really felt like 1993.
I'll try this out tomorrow. The idea of complete URLs actually does work: the trouble is that it has to go through many local machines for proofing before there will be an absolute URL, and I don't like the idea of switching URLs on approved proofs.
Daniel Paul O'Donnell, PhD Professor of English University of Lethbridge Lethbridge AB T1K 3M4 Canada
-----Original Message----- From: dm-l-bounces@uleth.ca on behalf of Andrew Dunning Sent: Wed 2011-07-27 21:57 To: dm-l, MailList Subject: Re: [dm-l] Help with embedded images
Dear Prof. O'Donnell,
This doesn't directly address your problem, but should get you around it entirely: using the <video> tag, it's now possible to embed video in a page without using the QuickTime plug-in. There's an excellent discussion of this at http://diveintohtml5.org/video.html. There are also pre-made video players using this technique at http://videojs.com/, http://mediaelementjs.com/, and http://www.jplayer.org/. In addition to having a working video player, your video should be more compatible with future browsers, and will also work on mobile devices.
Hope that helps,
Andrew Dunning PhD Student Collaborative Program in Editing Medieval Texts Centre for Medieval Studies University of Toronto
On Wed, Jul 27, 2011 at 9:53 PM, O'Donnell, Dan daniel.odonnell@uleth.ca wrote:
Hi all,
I have a pretty basic HTML question, I think.
I want to embed a couple of MP4 videos in an HTML file. Using something like the following code, I can do this relatively easily:
<div class="figure" id="d0e690"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640"> <param name="src" value="Pictures/Movie1.m4v"/> <param name="autoplay" value="true"/> <embed src="Pictures/Movie1.m4v" type="image/x-macpaint" pluginspage="http://www.apple.com/quicktime/download" autoplay="true" height="480" width="640"> </object> </div>
The trouble is that Movie1 is 30 odd megabytes and there are other movies in the file. So I'd rather use a place holder. Googling around I discovered that the recommended way of doing this is to make a 1 frame movie saying something like "click on me" which you put on the src attribute, and then you add an href attribute with the name of the "real" movie. If you add target="_self" it is supposed to replace the place holder with the longer movie. This would be the code:
<div class="figure" id="d0e690"> <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640" href="Pictures/Movie1.m4v" target="_self"> <param name="src" value="Pictures/Movie1poster.m4v"/> <param name="autoplay" value="true"/> <embed src="Pictures/Movie1poster.m4v" type="image/x-macpaint" pluginspage="http://www.apple.com/quicktime/download" autoplay="true" height="480" width="640" href="Pictures/Movie1.m4v" target="_self"/> </object> </div>
The problem is that Firefox at any rate seems to understand the src attribute as a base URL. If I click on the player and copy the URL that is produced or look at it in a full screen, Firefox is looking for the href video at
Pictures/Movie1poster.m4v/Pictures/Movie1.m4v
instead of
Pictures/Movie1.m4v
I've tried everything I can think of to get around this: moved the files into the root directory of the page, added ../ to the href to try and get it to back up a directory. Nothing seems to work. Since this is a very common thing on the internet, I must be doing something stupid. Does anybody know how to do it?
Daniel Paul O'Donnell, PhD Professor of English, University of Lethbridge Co-President, Society for Digital Humanities/Société pour l'étude des médias interactifs Co-Editor, Digital Studies/Le champ numérique Founding Editor, Digital Medievalist Digital Medievalist -- http://www.digitalmedievalist.org/ Journal: http://www.digitalmedievalist.org/journal/ Journal Editors: editors _AT_ digitalmedievalist.org News: http://www.digitalmedievalist.org/news/ Wiki: http://www.digitalmedievalist.org/wiki/ Twitter: http://twitter.com/digitalmedieval Facebook: http://www.facebook.com/group.php?gid=49320313760 Discussion list: dm-l@uleth.ca Change list options: http://listserv.uleth.ca/mailman/listinfo/dm-l
Digital Medievalist -- http://www.digitalmedievalist.org/ Journal: http://www.digitalmedievalist.org/journal/ Journal Editors: editors _AT_ digitalmedievalist.org News: http://www.digitalmedievalist.org/news/ Wiki: http://www.digitalmedievalist.org/wiki/ Twitter: http://twitter.com/digitalmedieval Facebook: http://www.facebook.com/group.php?gidI320313760 Discussion list: dm-l@uleth.ca Change list options: http://listserv.uleth.ca/mailman/listinfo/dm-l
-
Andrew Dunning -
O'Donnell, Dan