LukasBombach/webchimera.html

## webchimera.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>nw mediacenter</title>
</head>
<body>

<object type="application/x-chimera-plugin" width="640" height="360" id="webchimeraplayer">
    <param name="filename" value="http://archive.org/download/CrayonDragonAnAnimatedShortFilmByTonikoPantoja/Crayon%20Dragon%20-%20An%20animated%20short%20film%20by%20Toniko%20Pantoja.mp4" />
</object>

<textarea id="qmlcode">
import QtQuick 2.1
import QmlVlc 0.1

Rectangle {
    id: bg
    color: "transparent"
    anchors.fill: parent

    VlcVideoSurface {
        id: videoOutput
        source: vlcPlayer
        anchors.fill: parent
    }

    MouseArea {
        anchors.fill: parent;
        onClicked: vlcPlayer.togglePause();
    }

    Rectangle {
        id: ppBtn
        color: 'red'
        height: 30
        width: 30
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20

        MouseArea {
            anchors.fill: parent
            onClicked: vlcPlayer.togglePause()
        }

        Connections {
            target: vlcPlayer
            onMediaPlayerPlaying: ppBtn.color = 'green'
            onMediaPlayerPaused: ppBtn.color = 'red'
        }
    }
}

</textarea>

<script type="text/javascript">
    document.getElementById("webchimeraplayer").qml = document.getElementById("qmlcode").value;
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>nw mediacenter</title>
	</head>
	<body>

	<object type="application/x-chimera-plugin" width="640" height="360" id="webchimeraplayer">
	<param name="filename" value="http://archive.org/download/CrayonDragonAnAnimatedShortFilmByTonikoPantoja/Crayon%20Dragon%20-%20An%20animated%20short%20film%20by%20Toniko%20Pantoja.mp4" />
	</object>

	<textarea id="qmlcode">
	import QtQuick 2.1
	import QmlVlc 0.1

	Rectangle {
	id: bg
	color: "transparent"
	anchors.fill: parent

	VlcVideoSurface {
	id: videoOutput
	source: vlcPlayer
	anchors.fill: parent
	}

	MouseArea {
	anchors.fill: parent;
	onClicked: vlcPlayer.togglePause();
	}

	Rectangle {
	id: ppBtn
	color: 'red'
	height: 30
	width: 30
	anchors.horizontalCenter: parent.horizontalCenter
	anchors.bottom: parent.bottom
	anchors.bottomMargin: 20

	MouseArea {
	anchors.fill: parent
	onClicked: vlcPlayer.togglePause()
	}

	Connections {
	target: vlcPlayer
	onMediaPlayerPlaying: ppBtn.color = 'green'
	onMediaPlayerPaused: ppBtn.color = 'red'
	}
	}
	}

	</textarea>

	<script type="text/javascript">
	document.getElementById("webchimeraplayer").qml = document.getElementById("qmlcode").value;
	</script>
	</body>
	</html>