Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 10. Juli 2015 11:36

faglork
arbeitet mit CMS/ms
Ort: Fränkische Schweiz
Registriert: 15. Dezember 2010
Beiträge: 1.152
Webseite

Plugin: Cross-Browser responsive HTML5 Video mit Flash Fallback

Moin!

Besteht da Interesse daran? Ich habe ein einfaches Plugin geschrieben, welches ein MP4 Video mit einem freien Flash player abspielt (mit controls). Die Basis dafür war dies hier:
http://www.dev-metal.com/crossbrowser-s … lines-code


Aufgerufen wird es einfach mit
{PlayVideo vid="myvideo"}

Es hat noch eine Reihe von optionalen Parametern (breite, höhe, id, verzeichnisse, defaults ...)

Was verwendet ihr denn so? Ich hab mir das gebastelt weil ich was ganz einfaches für mein Kunden gesucht habe, und da dachte ich machs doch gleich selbst, dann weissde wasde hast ... ;-)

Ach ja, der Flash Fallback ist derzeit noch nicht responsive, aber da arbeit ich grad dran ...

Servus,
Alex

Beitrag geändert von faglork (10. Juli 2015 11:38)

Offline

#2 10. Juli 2015 19:31

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.227
Webseite

Re: Plugin: Cross-Browser responsive HTML5 Video mit Flash Fallback

Hallo Alex,

ich schicke mal ein UDT mit Fallback, ein wenig Geduld, muss erst etwas zu ende machen.

Da braucht man aber MP4, OGG, Web8 und noch was, das kann man mit FFMPEG machen, ist aber schwer weil es unzählige Einstellungen hat. Ich habe viel Zeit in internet verbracht die richtige Kommandos zu finden.


Edit
Hier ist nicht ein UDT aber Funktion
function-video-php.zip

ich habe diese angepasst für HTML5 aber das ist eine Weile her, funktioniert, denn Kunde klagt nicht.

Tag
{video id='video1' mp4='uploads/video/instruktion.mp4' ogg='uploads/video/instruktion.ogg' webm='uploads/video/instruktion.webm' flv='uploads/video/instruktion.flv' image='uploads/video/logo.jpg' }

MfG
Jan

Beitrag geändert von Janl (11. Juli 2015 00:12)


Ubuntu 16.04 KDE - Kubuntu 18.04 / win10 (1 duo-boot laptop)- LAMP
Raspi 4b mit Ubuntu 20.04 (64bit) und Mate.

Offline

#3 11. Juli 2015 07:54

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: Plugin: Cross-Browser responsive HTML5 Video mit Flash Fallback

Yoo man, wie es der Zufall so will, hab ich gerade akuten Bedarf an dem Plugin.

Offline

#4 11. Juli 2015 14:52

faglork
arbeitet mit CMS/ms
Ort: Fränkische Schweiz
Registriert: 15. Dezember 2010
Beiträge: 1.152
Webseite

Re: Plugin: Cross-Browser responsive HTML5 Video mit Flash Fallback

cyberman schrieb:

Yoo man, wie es der Zufall so will, hab ich gerade akuten Bedarf an dem Plugin.

Bittesehr:

[== php ==]
<?php

function smarty_cms_function_PlayVideo($params, &$smarty)
{

$vid = isset($params['vid']) ? $params['vid'] : "demo";
$id = isset($params['id']) ? $params['id'] : "video";
$width = isset($params['width']) ? $params['width'] : 640; 
$height = isset($params['height']) ? $params['height']: 480;
$path = isset($params['path']) ? $params['path']: videos;
$swfpath = isset($params['swfpath']) ? $params['swfpath']: src;
$gCms = cmsms();
$config = $gCms->GetConfig();
$upath = $config->smart_uploads_url();
$video = $upath."/".$path."/".$vid.".mp4";
$img = $upath."/".$path."/".$vid.".jpg";
$flashimg = str_replace("/","%2F",$img);
$flashvid = str_replace("/","%2F",$video);

$player = <<< EOT
    <div class="video" id="$id">
    <video controls="controls" poster="$img" width="100%" height="auto">
        <source src="$video" type="video/mp4" />
        <object type="application/x-shockwave-flash"
                data="/$swfpath/flowplayer-3.2.18.swf" width="$width" height="$height">
            <param name="movie" value="/$swfpath/flowplayer-3.2.18.swf" />
            <param name="allowFullScreen" value="true" />
            <param name="wmode" value="transparent" />
            <param name="flashVars"
                   value="config={'playlist':['$flashimg',{'url':'$flashvid','autoPlay':false}]}" />
            <img src="$img" width="100%" height="auto" title="No Flash found" />
        </object>
    </video>
  </div>
  <a href="$video" title="Video herunterladen">Video herunterladen</a>
EOT;
echo $player;
}

function smarty_cms_help_function_PlayVideo()
{
  ?>
  <h3>What does this plugin do?</h3>
  <p>It provides a very simple HTML5 video player with flash fallback. It is based upon https://github.com/panique/html5-video</p>
  <h3>How do you use it?</h3>
  <p>You need to install the FlowPlayer 3.2.18 flash player first. Set $swfpath to player directory.</p>
  <p>Upload mp4 and jpg files *with the same name* into /uploads/videos/ eg. demo.mp4 / demo.jpg</p>
  <p>NOTE: jpg image dimensions depend on your video format eg. 640x480 etc.</p>
  <p>Put following code into a template/gcb/page: <code>{PlayVideo vid='myvideo'}</code>
  	<br>NOTE: just the filename, no extension
  </p>
  <p>For styling purposes, the DIV containing the player has been given the css class="video". The default div ID is "video". You need to set different IDs if you place more than one video on a page. See below.</p>
  <p>NOTE: Default width is 100%, height is set to auto. If you leave it at that, it is totally responsive.</p>
  <p>Example for your stylesheets:<br />
  	<code>
  		div.video {width: 500px; height: 375px; border: 3px ridge #fc9;}
  	</code>
  <h3>Optional Parameters</h3>
  <ul>
  	<li><em>(optional)</em>  <tt>height</tt> - The height of the video. Default: "480"</li>
     <li><em>(optional)</em>  <tt>width</tt> - The width of the video. Default: "640"</li>
     <li><em>(optional)</em>  <tt>id</tt> - sets the ID of the DIV. Default: "video"</li>
     <li><em>(optional)</em>  <tt>path</tt> - the path to the video, relative to uploads directory. Default: "videos"</li>
     <li><em>(optional)</em>  <tt>path</tt> - the path to the FlowPlayer. Default: "src"</li>
  </ul>
  <?php
}

function smarty_cms_about_function_PlayVideo()
{
?>
  <p>Author:  faglork.com</p>
  <p>Based upon https://github.com/panique/html5-video</p>
  <p>Version 0.1</p>
<?php
}

?>

und als .zip im Anhang.
Den benötigten FlowPlayer gibts u.a. hier:
https://github.com/panique/html5-video

vergebt mir mein rudimentäres PHP ... und falls es was zu verbessern gibt, nur zu!
Der Flash-Fallback ist noch nicht responsive, hab aber grad nix passendes zum testen ...

Servus,
Alex

Offline

#5 31. Juli 2015 11:31

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.017
Webseite

Re: Plugin: Cross-Browser responsive HTML5 Video mit Flash Fallback

Danke dir!!

faglork schrieb:

vergebt mir mein rudimentäres PHP ... und falls es was zu verbessern gibt, nur zu!

Musst dein Licht nicht unter den Scheffel stellen, passt schon - nur dies

$gCms = cmsms();
$config = $gCms->GetConfig();

würde ich in eines zusammenfassen - $gCms dient allenfalls der Kompatibilität zu früheren Versionen. Und da es früher als globale Variable auch eine andere Bedeutung hatte, aber nun nicht mehr existiert, würde ich schon deshalb auf deren Einsatz verzichten. Verwirrt nur unnötig wink.

Offline