CE-HTML介绍

CE-HTML介绍

 

CE-HTML是一种用于为消费电子设备(如电视)创建用户界面页面的语言。CE-HTML页面通常以在线的方式存放,“10-foot user interface”,易于从远程控制。CE-HTML是XHTML和相关标准的Profile,并带指定的CE-HTML扩展。

 

注:10-foot user interface是一个软件GUI的术语,针对电视而设计,使用遥控器进行交互。
“10 foot”指的是GUI界面的元素,如:菜单、按钮、文本字体等等,理论上足够大,可以在10英尺远的距离看清楚。“10英尺”要避免引起分心、保持清晰,那就要非常简单,通常只需核心按钮。
典型的“10-foot”界面例子是媒体中心应用软件,如:Elisa (software), Front Row, LinuxMCE, MythTV, Windows Media Center和XBMC Media Center界面。

 

CE-HTML是CEA-2014标准(也即Web4CE)的一部分,由消费电子协会定义。

 

CE-HTML由下列Internet语言组成:
1)Ecmascript 262 第三版
2)XHTML 1.0 transitional/strict
3)CSS TV Profile 1.0
4)XMLHttpRequest object
5)DOM level 2.0 (Core, Style, Events, HTML)
6)大量针对消费电子设备的扩展

 

CE-HTML还能用于家庭内可访问Internet的UPnP设备。它允许内容创建者使用共同的、已知的Web语言来定义可控制CE设备的用户界面。CE-HTML客户端通常由适合于CE-HTML标准的、且运行于消费电子设备的Web浏览器组成。CE-HTML为这些浏览器提供了专门的扩展,如:
1)利用CSS3输入格式标签,支持多插头插座或其它字母-数字输入的专用CE设备
2)利用音视频脚本对象
3)通过使用上、下、左、右和确认键遥控操作
4)客户端性能匹配
5)CE设备的用户界面Profiles
6)第三方通知
7)CE-HTML内容新指定的MIME类型:application/ce-html+xml

 

CE-HTML代码样例:

  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  3. "ce-html-1.0-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head>  
  6. <title>CE-HTML</title>  
  7. </head>  
  8. <body onload="myvid.play(1);">  
  9. CE-HTML a/v object:<br/>  
  10. <object type="video/mpeg" id="myvid" data="myvideo.mpeg" width="640" height="480"></object>  
  11. </body>  
  12. </html>  
  

### ce-polyfill 实现与使用 在现代Web开发中,Custom Elements (CE) 是 Web Components 的一部分,允许开发者创建自定义 HTML 标签。然而,并不是所有的浏览器都完全支持 Custom Elements v1 规范,在这些情况下就需要使用 `ce-polyfill` 来提供兼容性。 #### 使用 angular-polyfills.js 替代 external-dependencies.js 由于外部依赖包 `external-dependencies.js` 已被移除[^1],建议采用 `angular-polyfills.js` 文件来引入必要的 polyfill 支持。此文件包含了对于旧版浏览器的支持代码,其中包括了对 Custom Elements API 的填充实现。 #### 安装 Polyfill 库 为了方便集成和管理,推荐通过 npm 或 yarn 安装官方维护的 custom-elements 包: ```bash npm install @webcomponents/custom-elements ``` 或者 ```bash yarn add @webcomponents/custom-elements ``` #### 引入并初始化 Polyfill 安装完成后可以在项目入口处加载该库,并调用其提供的方法完成初始化工作: ```javascript import '@webcomponents/custom-elements'; if (!window.customElements || window.customElements.forcePolyfill) { const { define, get } = require('@webcomponents/custom-elements'); } ``` 这段代码会检测当前环境是否已经存在原生支持;如果不存在,则强制应用 polyfill 版本的功能[^2]。 #### 创建自定义元素类 下面是一个简单的例子展示如何定义一个新的自定义组件: ```javascript class MyElement extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` <style> p { color: blue; } </style> <p>Hello from my-element!</p>`; } connectedCallback() { console.log('MyElement instance is added to page.'); } disconnectedCallback() { console.log('MyElement instance has been removed from the page.'); } } // 注册新的自定义标签名及其对应的类 customElements.define('my-element', MyElement); ``` 以上代码片段展示了如何继承 `HTMLElement` 类来自定义行为逻辑以及样式渲染方式。当页面上首次遇到 `<my-element>` 这样的未知标签时就会触发实例化过程[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值