XHTMLforum - HTML5 Frage

XHTMLforum (http://xhtmlforum.de/index.php)

- (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)

- - HTML5 Frage (http://xhtmlforum.de/showthread.php?t=67279)

Hallo liebe Forumgemeinde,

ich hab ein Anliegen:

"Ich versuche über eine Website per http gehostete Videos darzustellen auf einer neuen seite nur mit dem player.
Es handelt sich um die Video Formate: .flv, .mp4, .ogg

Nun hab Ich über Adobe Flash Pro schon die beide .swf Dateien erstellt und auch die normale HTML Datei. Also Flash läuft nun schonmal.

Möchte allerdings allen Betrachtern die Möglichkeit geben meine Videos anzusehn.

Somit auch Iphone, Ipad Kunden die eben KEIN Flash haben.

Somit kam Ich auf HTML5.

Wie schreibe Ich bei HTML5 zu der Flash Programmierung den HTML5 Code so dazu das nicht 2 Player erscheinen und nur eines ausgewählt wird von beidem !?

Ich füge nun mal den Code vom HTML vom Flash dazu, da muss irgendwie noch der HTML5 Code dazu

HTML-Code:

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

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

        <head>

                <title>Unbenannt-15</title>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <style type="text/css" media="screen">

                html, body { height:100%; background-color: #ffffff;}

                body { margin:0; padding:0; overflow:hidden; }

                #flashContent { width:100%; height:100%; }

                </style>

        </head>

        <body>

                <div id="flashContent">

                        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="819" height="499" id="Unbenannt-15" align="middle">

                                <param name="movie" value="Unbenannt-15.swf" />

                                <param name="quality" value="high" />

                                <param name="bgcolor" value="#ffffff" />

                                <param name="play" value="true" />

                                <param name="loop" value="true" />

                                <param name="wmode" value="window" />

                                <param name="scale" value="showall" />

                                <param name="menu" value="true" />

                                <param name="devicefont" value="false" />

                                <param name="salign" value="" />

                                <param name="allowScriptAccess" value="sameDomain" />

                                <!--[if !IE]>-->

                                <object type="application/x-shockwave-flash" data="Unbenannt-15.swf" width="819" height="499">

                                        <param name="movie" value="Unbenannt-15.swf" />

                                        <param name="quality" value="high" />

                                        <param name="bgcolor" value="#ffffff" />

                                        <param name="play" value="true" />

                                        <param name="loop" value="true" />

                                        <param name="wmode" value="window" />

                                        <param name="scale" value="showall" />

                                        <param name="menu" value="true" />

                                        <param name="devicefont" value="false" />

                                        <param name="salign" value="" />

                                        <param name="allowScriptAccess" value="sameDomain" />

                                <!--<![endif]-->

                                        <a href="http://www.adobe.com/go/getflash">

                                                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />

                                        </a>

                                <!--[if !IE]>-->

                                </object>

                                <!--<![endif]-->

                        </object>

                </div>

        </body>

</html>

Ich hoffe Ihr könnt mir helfen, der HTML5 Code ist:

HTML-Code:

<video src="video.ogg" autoplay

controls > 

<video src="video.mp4" type="video/mp4" autoplay

controls >

Bin am verzweifeln :):mrgreen:
#bitte herzlichst um Hilfe!

Ich will es mit Javascript realisieren:

HTML-Code:

      <SCRIPT LANGUAGE=JavaScript1.1>

<!--

var MM_contentVersion = 6;

var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;

if ( plugin ) {

        var words = navigator.plugins["Shockwave Flash"].description.split(" ");

        for (var i = 0; i < words.length; ++i)

        {

        if (isNaN(parseInt(words[i])))

        continue;

        var MM_PluginVersion = words[i];

        }

    var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion;

}

else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0

   && (navigator.appVersion.indexOf("Win") != -1)) {

    document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag

    document.write('on error resume next \n');

    document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n');

    document.write('</SCR' + 'IPT\> \n');

}

if ( MM_FlashCanPlay ) {

   

}

 else{



}

//-->

</SCRIPT>

P.s.: Ich habe Adobe Dreamweaver mit welchem Ich dann die HTML5 Seite anfertigen würde.
Geht nur um eine allein mit dem Video stehende Videoseite.

Zitat:

Zitat von Html5 (Beitrag 514504)

Wie schreibe Ich bei HTML5 zu der Flash Programmierung den HTML5 Code so dazu das nicht 2 Player erscheinen und nur eines ausgewählt wird von beidem !?

Füge das video-Element innerhalb des object-Elements ein. Dort, wo jetzt ein unsinniger Verweis zum Herunterladen des Flashplayers steht.

Zitat:

Zitat von Html5 (Beitrag 514504)

Ich will es mit Javascript realisieren:

Dieses Uralt-Script solltest du rückstandslos entfernen.

Danke erstmal für die Antwort!

Vielen Dank!

Ist das so koreckt !?
Erkennt nun der Browser Systemabhängig welches Video er besser öffnet !?

HTML-Code:

<!DOCTYPE HTML>

<html>

<head>

                <title>Unbenannt-15</title>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <style type="text/css" media="screen">

                html, body { height:100%; background-color: #ffffff;}

                body { margin:0; padding:0; overflow:hidden; }

                #flashContent { width:100%; height:100%; }

                </style>

        </head>

        <body>

    

                <div id="flashContent">

            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="819" height="499"            id="Unbenannt-15" align="middle">

                                <param name="movie" value="Unbenannt-15.swf" />

                                <param name="quality" value="high" />

                                <param name="bgcolor" value="#ffffff" />

                                <param name="play" value="true" />

                                <param name="loop" value="true" />

                                <param name="wmode" value="window" />

                                <param name="scale" value="showall" />

                                <param name="menu" value="true" />

                                <param name="devicefont" value="false" />

                                <param name="salign" value="" />

                                <param name="allowScriptAccess" value="sameDomain" />

                                <!--[if !IE]>-->

                                <object type="application/x-shockwave-flash" data="Unbenannt-15.swf" width="819" height="499">

                                        <param name="movie" value="Unbenannt-15.swf" />

                                        <param name="quality" value="high" />

                                        <param name="bgcolor" value="#ffffff" />

                                        <param name="play" value="true" />

                                        <param name="loop" value="true" />

                                        <param name="wmode" value="window" />

                                        <param name="scale" value="showall" />

                                        <param name="menu" value="true" />

                                        <param name="devicefont" value="false" />

                                        <param name="salign" value="" />

                                        <param name="allowScriptAccess" value="sameDomain" />

                                <!--<![endif]-->

                                        <video src="Video15.ogg" autoplay

            controls > 

            <video src="Video15.mp4" type="video/mp4" autoplay

            controls > 

                                <!--[if !IE]>-->

                                </object>

                                <!--<![endif]-->

                        </object>

                </div>

        </body>

</html>

Zitat:

Zitat von Html5 (Beitrag 514509)

Ist das so koreckt !?

Korrekt.

Zitat:

Zitat von Html5 (Beitrag 514509)

Erkennt nun der Browser Systemabhängig welches Video er besser öffnet !?

Der Browser versucht zuerst das object-Element darzustellen, misslingt dies, versucht er die darinliegenden Elemente, also das video-Element darzustellen. Kurz: Ja.

Muss ich dazu noch in der .htaccess

HTML-Code:

AddType video/ogg .ogv

AddType video/mp4 .mp4

hinzufügen?

Die aufgerufene HTML5 kommuniziert ja direkt mit dem Browser.
Also wenn die Filme im selben Ordner sind müssten Sie ja sowieso erkannt und abgerufen werden.

Ich hab hierzu eben etwas gelesen was sich

"Flash Fallbackforward nennt:

geht hauptsächlich um Plugin Skins für den Player aber behandelt auch das Thema HTML5 und Flash in einer HTML...
MediaElement.js - HTML5 video player and audio player with Flash and Silverlight shims

Vielen Dank schonmal :)!!!'DANKESCHÖN :mrgreen:

Du kannst es ohne Javascript lösen, das Videoelement kann mehrere Sourceelemente aufnehmen. Für die Flashvariante empfehle ich dir Flashsatay, damit kannst du den Code deutlich kürzer halten.

Guten Morgen liebe Forumgemeinde :)

hallo inta, wie sieht sowas denn dann aus !?

HTML-Code:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

width="400" height="300" id="movie" align="">

<param name="movie" value="movie.swf">

<embed src="movie.swf" quality="high" width="400"

height="300" name="movie" align="" 

type="application/x-shockwave-flash"

plug inspage="http://www.macromedia.com/go/getflashplayer"> 

</object>

HTML-Code:

<!DOCTYPE HTML>

<html>

<head>

                <title>Unbenannt-15</title>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <style type="text/css" media="screen">

                html, body { height:100%; background-color: #ffffff;}

                body { margin:0; padding:0; overflow:hidden; }

                #flashContent { width:100%; height:100%; }

                </style>

        </head>

        <body>

    <object

classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 

codebase="http://download.macromedia.com

/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

width="400" height="300" id="movie" align="">

<param name="movie" value="movie.swf">

<embed src="movie.swf" quality="high" width="400"

height="300" name="movie" align="" 

type="application/x-shockwave-flash"

plug inspage="http://www.macromedia.com/go/getflashplayer"> 

</object>

                                <!--[if !IE]>-->

                                <object

classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

width="400" height="300" id="movie" align="">

<param name="movie" value="movie.swf">

<embed src="movie.swf" quality="high" width="400"

height="300" name="movie" align="" 

type="application/x-shockwave-flash"

plug inspage="http://www.macromedia.com/go/getflashplayer"> 

</object>

                                <!--<![endif]-->

           <video src="Video15.ogg" autoplay controls > 

           <video src="Video15.mp4" type="video/mp4" autoplay controls > 

                                <!--[if !IE]>-->

                                </object>

                                <!--<![endif]-->

                        </object>

                </div>

        </body>

</html>

hm wie mach Ich das es funktioniert, nun weicht es ja noch auch auf den plugin download aus, ausserdem weis Ich nicht ob die 2 doppelte version "endif" sinn macht!

Danke und Grüsse,
HTML5

Ich habe es nicht getestet sondern nur runtergeschrieben, aber so sieht eine Kombination aus Flashsatay und verschiedenen Dateitypen für das Videoelement aus:

HTML-Code:

<object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">

        <param name="movie" value="movie.swf" />

        <video width="400" height="300" controls="controls" autoplay="autoplay">

                <source src="movie.mp4" type="video/mp4" />

                <source src="movie.ogg" type="video/ogg" />

        </video>

</object>

Du müsstest das auch umdrehen können, so dass zuerst der HTML5-Player verwendet wird und Flash nur als Fallback. Wieder ungetestet:

HTML-Code:

<video width="400" height="300" controls="controls" autoplay="autoplay">

        <source src="movie.mp4" type="video/mp4" />

        <source src="movie.ogg" type="video/ogg" />

        <object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">

                <param name="movie" value="movie.swf" />

        </object>

</video>

Zitat:

Zitat von Html5 (Beitrag 514513)

Muss ich dazu noch in der .htaccess (...) hinzufügen?

Nein.

Zitat:

Zitat von Html5 (Beitrag 514527)

hallo inta, wie sieht sowas denn dann aus !?

Es sieht so aus, dass du den Artikel vollständig lesen und verstehen musst :)

Zitat:

Zitat von inta (Beitrag 514529)

Ich habe es nicht getestet sondern nur runtergeschrieben, aber so sieht eine Kombination aus Flashsatay und verschiedenen Dateitypen für das Videoelement aus:

Das funktioniert einwandfrei.

Zitat:

Zitat von inta (Beitrag 514529)

Du müsstest das auch umdrehen können, so dass zuerst der HTML5-Player verwendet wird und Flash nur als Fallback. Wieder ungetestet:

Das funktioniert nicht. Die Inhalte des video-Element sind nur für Browser gedacht, die das video-Element gar nicht unterstützen. Unterstützt der Browser das video-Element, aber nicht das genutzte Format, dann wird lediglich ein Platzhalter angezeigt.

HTML-Code:

<!DOCTYPE HTML>

<html>

        <head>

                <title>video1</title>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <style type="text/css" media="screen">

                html, body { height:100%; background-color: #ffffff;}

                body { margin:0; padding:0; overflow:hidden; }

                #flashContent { width:100%; height:100%; }

                </style>

        </head>

        <body>

        <video width="400" height="300" controls="controls" autoplay="autoplay">

        <source src="video-1.mp4" type="video/mp4" />

        <source src="video-1.ogg" type="video/ogg" />

        <object type="application/x-shockwave-flash" data="secure-video-1.swf" width="400" height="300">

                <param name="movie" value="video-1.swf" />

        </object>

</video>

                                <!--[if !IE]>-->

                                </object>

                                <!--<![endif]-->

                        </object>

                </div>

        </body>

</html>

Wäre das so koreckt ?

Ist ja viel übersichtlicher, also wäre echt toll wenn das geht.