SVG を使用してビデオ要素の UI を改善しようとしています。コントロールバーをアニメーション化するための簡単な解決策を探しています。マウスがウィンドウの中にあるときにウィンドウの下部から上昇したい(YouTubeのように)。
これが私がやりたいことです：
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 640 360" preserveAspectRatio="none" version="1.1">
<g id="control_bar" transform="translate(0,360)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" begin="window.mouseover" from="0,360" to="0,328" dur="350ms" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" begin="window.mouseout" from="0,328" to="0,360" dur="350ms" fill="freeze"/>
<rect x="0" y="0" width="640" height="32" fill="grey"/>
</g>
</svg>
残念ながら、window.mouseover は何もしません。代わりに、ウィンドウ全体を覆う透明な長方形を作成し、それに id="screen" を指定して begin="screen.mouseover" などを使用しました。確かに、マウスがウィンドウ内にあるときに、コントロール バーが希望どおりにアニメーション化されます。残念ながら、screen はその下のすべての要素が独自のマウス イベントを取得するのを妨げます。
これを達成するための最も簡単な方法を探しています。大量の JavaScript やライブラリを避けたいので、マークアップのみ (SMIL) を使用することをお勧めします。
ありがとう！
>>>編集<<<私が求めているものを明確にするために：
HTML5 <video> 要素用のカスタム SVG UI を作成したいと考えていました。私の最初のアプローチは、document.createElementNS を使用して SVG を DOM に動的に挿入することでしたが、これは非常に面倒でした。次に Raphael を試してみましたが、少しだけ乱雑になりませんでした。UI を自己完結型のドキュメントにすることにしたので、UI 用の SVG ドキュメントを作成し、それをロードして <video> 要素の上にオーバーレイされる <object> 要素を作成することにしました。これに関する私の問題は、マウスが UI のウィンドウ内にある限り、コントロール バーをアニメーション化してその位置にとどめられないことでした。また、親ドキュメントから UI と通信するのも面倒でした。
私の現在の解決策：
次のように <video> 要素を HTML ドキュメントに配置します。
<video width="640" src="myvideo.webm"/>
次に、次の JavaScipt を使用します (jquery を使用):
$(function(){
$("video").each(function(){
var old_video = $(this);
var width = old_video.attr("width")
var height = Math.floor(width / (16 / 9))
var video = $("<object/>")
video.addClass("video")
video.css({
width: width,
height: height,
})
var src = old_video.attr("src")
video.attr("data", "video.xhtml#" + src)
old_video.replaceWith(video)
})
})
これにより、video 要素が、データ uri が次のように設定されている <object> に置き換えられます: video.xhtml#myvideo.webm
次に、video.xhtml の内容は次のようになります。
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script src="jquery.js"/>
<script>
$(function(){
$(window).hover(function(){
$("#in")[0].beginElement()
}, function(){
$("#out")[0].beginElement()
})
var video = document.createElement("video")
video.setAttribute("src", location.hash.substr(1))
$("div#video").replaceWith(video)
})
</script>
<style>
svg {
position: absolute;
top: 0; left: 0;
}
video {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: black;
}
</style>
</head>
<body>
<div id="video"/>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 640 360" preserveAspectRatio="none" version="1.1">
<g id="bar" transform="translate(0,360)">
<animateTransform id="in" attributeName="transform" attributeType="XML" type="translate" begin="indefinite" from="0,360" to="0,328" dur="50ms" fill="freeze"/>
<animateTransform id="out" attributeName="transform" attributeType="XML" type="translate" begin="indefinite" from="0,328" to="0,360" dur="350ms" fill="freeze"/>
<rect x="0" y="0" width="640" height="32" fill="grey"/>
<rect onclick="$('video')[0].play()" x="0" y="0" width="64" height="32" fill="blue">
<set id="btn" attributeName="fill" to="red" begin="mousedown" end="mouseup;mouseout" dur="1s" fill="remove" />
</rect>
</g>
</svg>
</body>
</html>
このドキュメントは、ハッシュからビデオ URI を取得し、SVG UI の背後にビデオ要素を挿入します。これは XHTML ドキュメント (SVG ではない) であるため、jquery を使用してマウス イベントを処理できるようになりました。これは理想的ではありませんが、機能しているようです。唯一の問題は、JavaScript エラーが発生することです: a.compareDocumentPosition は関数ではありません ソース ファイル: jquery.js Line: 17 in Firefox.
このアプローチは意味がありますか？より良い方法はありますか？また、JavaScript/jQuery ではなく、SMIL のみを使用したアニメーションのソリューションを希望します。
ありがとう！