Javascript 如何为JSView创建自定义属性处理程序?
我想使用JsViews来播放html5视频内容,如下所示: html: 可以看出,默认情况下会处理属性muted,看起来像muted=true或muted=false,但在HTML中,属性muted可能是,也可能不是。也就是说,在此处to应作为disable的属性:Javascript 如何为JSView创建自定义属性处理程序?,javascript,jquery,html5-video,jsrender,jsviews,Javascript,Jquery,Html5 Video,Jsrender,Jsviews,我想使用JsViews来播放html5视频内容,如下所示: html: 可以看出,默认情况下会处理属性muted,看起来像muted=true或muted=false,但在HTML中,属性muted可能是,也可能不是。也就是说,在此处to应作为disable的属性: 也许有某种方法可以自定义替代jsviews中的标准html属性处理程序?当mute为false时,可以通过以下方式删除mute属性: 但是,这并不能使事情按您想要的方式工作,因为动态删除或添加“静音”属性实际上不会使视频控件静音/取
也许有某种方法可以自定义替代jsviews中的标准html属性处理程序?当mute为false时,可以通过以下方式删除mute属性: 但是,这并不能使事情按您想要的方式工作,因为动态删除或添加“静音”属性实际上不会使视频控件静音/取消静音。为此,需要将muted元素的muted属性设置为true/false 此外,当用户单击视频元素UI上的内置静音控件时,您希望该控件可以明显地修改静音数据属性。所有这些都可以使用以下代码:
var video = $("video");
$.observe(data, "muted", function(ev, eventArgs) {
video[0].muted = eventArgs.value;
})
video.on("volumechange", function() {
$.observable(data).setProperty("muted", video[0].muted);
});
以下是您的JSFIDLE的更新版本,其中包含以下更改:
我打算在下一个JsViews中添加一个新特性,以便能够选择将数据链接到HTML元素的属性,而不是相应的属性。语法将是data link=prop muted{:…},类似于数据链接到CSS属性data link=CSS muted{:…}。通过该更新,您将能够简化事情并编写以下内容:
模板:
<video autobuffer controls data-link="prop-muted{:muted}">
<source id="mp4" data-link="src{:src}" type="video/mp4"/>
</video>
<label>Muted: <input type="checkbox" data-link="muted"/></label>
var video = $("video");
$.observe(data, "muted", function(ev, eventArgs) {
video[0].muted = eventArgs.value;
})
video.on("volumechange", function() {
$.observable(data).setProperty("muted", video[0].muted);
});
<video autobuffer controls data-link="prop-muted{:muted}">
<source id="mp4" data-link="src{:src}" type="video/mp4"/>
</video>
<label>Muted: <input type="checkbox" data-link="muted"/></label>
var data = {
src: "http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4",
muted: true
};
var myTmpl = $.templates("#theTmpl");
myTmpl.link("#result", data);
$("video").on("volumechange", function(ev) {
$.observable(data).setProperty("muted", ev.target.muted);
});