找到 449 篇文章,主题为编程脚本

如何在 HTML 5 中将视频添加到网站背景?

Chandu yadav
更新于 2020年6月24日 13:58:52

380 次浏览

添加一个按钮来播放或暂停视频。然后,我们将视频的样式设置为百分百高度和宽度,以便它覆盖整个背景。以下是将视频设置为 HTML5 中网站背景的代码片段。        您的浏览器不支持 HTML5 视频。以下是暂停视频的方法:−function display() {    if (video.paused) {       video.play();       btn.innerHTML = "暂停视频!";    } else {       video.pause();       btn.innerHTML = "播放";    } }

将视频转换为 HTML5 ogg/ogv 和 mpg4

karthikeya Boyini
更新于 2020年6月24日 13:40:14

326 次浏览

要将视频转换为 ogg 或 mpg4,您需要使用诸如 Free HTML5 Video Player And Converter 之类的第三方软件。启动它并选择输入视频文件。添加以下任何格式的文件:−*.avi; *.ivf; *.div; *.divx; *.mpg; *.mpeg; *.mpe; *.mp4; *.m4v; *.webm; *.wmv; *.asf; *.mov; *.qt; *.mts; *.m2t; *.m2ts; *.mod; *.tod; *.vro; *.dat; *.3gp2; *.3gpp; *.3gp; *.3g2; *.dvr-ms; *.flv; *.f4v; *.amv; *.rm; *.rmm; *.rv; *.rmvb; *.ogv; *.mkv; *.ts。现在选择输出位置,单击“浏览...”按钮,然后选择保存视频的位置。选择预设,这些是预先配置的。选择播放器主题并单击 ... 阅读更多

HTML 5 视频或音频播放列表

Giri Raju
更新于 2020年6月24日 13:41:09

557 次浏览

使用 HTML 和 JavaScript 添加播放列表。当音频/视频已播放完毕时,onended 事件会触发。您可以添加诸如“感谢您的观看”、“敬请期待!”等消息。示例您可以尝试运行以下代码来实现 onended 属性:                              您的浏览器不支持 video 元素。                      function display() {             alert ("感谢您的观看!敬请期待!");          }          您可以像在下面给出的代码中那样在 onended 事件中加载下一个片段    var next = "path/of/next/video.mp4";    var video = document.getElementById('video');    video.onended = function(){    video.src = next; }

如何使用 HTML5 和 canvas 或 SVG 绘制网格?

Arjun Thakur
更新于 2020年6月24日 13:43:08

516 次浏览

在下面给出的示例中,我们首先定义了网格的宽度和高度。然后我们定义画布的大小,并将网格绘制到画布中。//我们正在设置网格的宽度和高度 var grid_w = 200; var grid_h = 200; //我们正在设置网格周围的填充 var gridp = 15; //我们通过定义其宽度和高度来定义画布的大小 var canvas_w = grid_w + (gridp*2) + 1; var canvas_h = grid_h + (gridp*2) + 1; var canvas = $('').attr({width: canvas_w, height: canvas_h}).appendTo('body'); var ctx = canvas.get(0).getContext("2d");这是我们的方法:−function ... 阅读更多

如何清除 HTML5 画布上的图表,以便无法触发悬停事件?

Samual Sam
更新于 2020年6月24日 13:45:44

179 次浏览

要清除画布上的图表,请删除该元素,然后将新元素附加到父容器,如下面的代码所示:−var resetCanvas = function(){    $('#results-graph').remove();      $('#graph-container').append('');    canvas = document.querySelector('#results-graph');    ct = canvas.getContext('2d');    ct.canvas.width = $('#graph').width(); // 在这里,我们将新画布元素的大小调整为父级宽度    ct.canvas.height = $('#graph').height(); // 在这里,我们将新画布元素的大小调整为父级高度    var a = canvas.width/2;    var b = canvas.height/2;    ct.font = '12pt Calibri';    ct.textAlign = 'Align Left';    ct.fillText('left aligned ... 阅读更多

如何在 HTML 中建立浏览器到浏览器(对等)连接?

Giri Raju
更新于 2020年6月24日 13:44:32

378 次浏览

对于浏览器到浏览器的连接,请按照以下步骤操作:−所有以下库:−创建对等体:−要创建对等体,您需要获取免费的 API 密钥。var peer = new Peer('pick-an-id', {key: 'myapikey'});连接:−var conn = peer.connect('another-peers-id'); conn.on('open', function(){    conn.send('Welcome!'); });

缩放 HTML5 画布到鼠标光标

Ankith Reddy
更新于 2020年1月24日 10:52:18

1K+ 次浏览

画布始终从其当前原点缩放。默认原点是 [0, 0]。如果您想从另一个点缩放,您可以首先执行 ctx.translate(desiredX, desiredY);。这会将画布的原点重置为 [desiredX, desiredY]。translate() 方法重新映射画布上的 (0, 0) 位置。scale() 方法缩放当前绘图,放大或缩小。如果您想通过偏移量转换() 画布上下文,则需要首先 scale() 它以放大或缩小,然后通过鼠标偏移量的反方向 translate() 回来。以下示例中给出了这些步骤 ctx.translate(pt.x, pt.y); ... 阅读更多

如何将光标(自动聚焦)放置在页面加载时带有 HTML 的文本框中?

Lakshmi Srinivas
更新于 2020年6月1日 11:37:10

3K+ 次浏览

使用 autofocus 属性在页面加载时将光标放置在文本框中。autofocus 属性是一个布尔属性。如果存在,则指定元素在页面加载时应自动获得焦点。这是一个示例:−示例                    姓名:          科目:                    

HTML5 日期选择器是否有任何样式选项?

George John
更新于 2023年11月22日 04:25:09

2K+ 次浏览

HTML5 中的日期选择器会显示类似日历的弹出窗口。这与选择月份和年份相同,并且这会添加日期。示例:HTML 日期选择器的样式选项您还可以自定义弹出窗口并添加背景颜色。您可以尝试运行以下代码以添加 HTML 日期选择器的样式选项:− ::-webkit-datetime-edit { padding: 4em; } ::-webkit-datetime-edit-fields-wrapper { background:blue; } ::-webkit-datetime-edit-text { padding: 0 0.5em; } 编辑月份、日期和年份字段以下是编辑月份、日期和年份字段的方法:− ::-webkit-datetime-edit-month-field { color: white; } ::-webkit-datetime-edit-day-field { color: red; } ::-webkit-datetime-edit-year-field { color: red; } ::-webkit-calendar-picker-indicator { background:gray; }

HTML 中的网站 Apple Touch 图标

karthikeya Boyini
更新于 2020年6月24日 13:48:22

2K+ 次浏览

对于 iPhone 或 iPad 上的网页图标,请使用 Apple Touch 图标或 apple-touch-icon.png 文件。当有人将您的网页添加为书签时,会使用此图标。对于具有不同设备分辨率(如 iPhone 或 iPad)的多个图标,请向每个链接元素添加大小属性,如下所示:−设置大小将使用适合该设备的适当大小的图标。

广告