html 相关问题

HTML(超文本标记语言)是用于构造网页和格式化内容的标准标记语言。 HTML在语义上描述了网站的结构以及用于表示的提示,使其成为标记语言,而不是编程语言。 HTML主要与CSS和JavaScript结合使用,为页面添加样式和行为。 HTML规范的最新修订版是HTML5.2。

HTML 视频无法在 Safari 浏览器中播放

下面的代码在 Mozilla 和 Chrome 中运行良好。但在 Safari 中视频无法播放。 下面的代码在 Mozilla 和 Chrome 中运行良好。但在 Safari 中视频无法播放。 <video id="v-control" width="100%" autoplay="autoplay" loop> <source src="assets/img/web home page banner.mp4" type="video/mp4" media="all and (max-width: 480px)"> <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> <source src="assets/img/web home page banner.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video> 我已经尝试过 preload 作为视频标签,如果我添加 controls,我应该单击“播放”按钮。我不需要视频的任何控件,因此我删除了控件。 如果视频无法在 Safari 中运行,但可以在其他浏览器(Chrome、Firefox、Edge)中运行,则您可能会遇到与 字节范围请求 相关的问题。 字节范围请求是指客户端仅向服务器请求所请求文件的特定部分。这样做的主要目的是通过仅根据需要下载文件的一小部分(在您的情况下是视频)来节省带宽使用。如果您检查 Safari 视频请求,您可能会注意到 Range 标头设置为 bytes=0-1。这是 Safari 在请求更大数据块之前测试您的 HTTP 服务器是否接受字节范围的方法。 要修复您的服务器配置,查看 Apple 的建议。如果您需要快速修复,您可以将视频移动到具有正确配置的其他托管服务器(并确保更新所有视频源引用)。 Safari 已开始(去年)默认情况下阻止带音轨的视频自动播放。据我所知,他们从未专门公开过这一点,但我相信这是以下更改的一部分: Safari 11 还允许用户通过打开 Safari 的新“网站”首选项窗格来控制允许哪些网站自动播放视频和音频 (来源) 唯一真正的解决方法是从视频中删除音轨,或者默认将其静音。 <video id="v-control" width="100%" autoplay="autoplay" loop muted> 如果您的服务器可以检测到请求者的浏览器,您可以将其仅应用于 Safari,而其他浏览器则保持原样。 在我的例子中,我将 Angular 与 service-worker 一起使用,并且 Safari 没有加载 mp4 文件。 Service Worker 破坏了 Byte-range 请求,因为它就像 Safari 和服务器之间的中间人,在这个过程中,SW 将 http 响应代码从 206 更改为 200,这样 Safari 就不会下载 mp4。 为了解决这个问题,当我需要显示 mp4 视频时,我会绕过 Service Worker,使用 Angular 8 很简单,只需在 mp4 url 和作品中添加 ngsw-bypass=true 作为查询字符串即可。 ( https://....video.mp4?ngsw-bypass=true ) 请记住,您提供的视频需要包含流式传输所需的元数据。 就我而言,我使用 ffmpeg 在服务器中提供编码的动态视频。使用 ffmpeg 命令中的 -movflags faststart 使视频可以在 Safari 上播放 其他解决方法还包括将属性 playsInline 与 muted 一起添加到视频标签。 例如,这样的事情: <video id="v-control" width="100%" autoplay="autoplay" loop muted playsInline> playsInline 允许浏览器在原处播放视频,而不是默认的起点。 您尝试在视频中使用属性:playsinline,它可以帮助您在 safari 浏览器中播放视频 添加了属性“静音” --- 视频静音自动播放--- 在 Chrome 中一切正常,Safari 也在尝试 我也遇到了类似的问题,视频无法在 Safari 上播放。问题出在我的网络服务器上。我将视频移动到另一个托管服务器,从那里加载它并且它工作了。 例如 而不是: <video src='/assets/myVideo.mp4' controls> </video> 做这样的事情: <video src='https://anotherServer.com/assets/myVideo.mp4' controls> </video>

回答 8 投票 0

从标记中删除蓝色背景

如何去除标记中的蓝色背景? 使用默认图标和自定义图标(具有透明背景的 png)会发生这种情况 难道我做错了什么? 如何去除标记中的蓝色背景? 使用默认图标和自定义图标(具有透明背景的 png)会发生这种情况 我做错了什么吗? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> <title>Map with OpenStreetMap</title> <style> #map { height: 400px; } </style> </head> <body> <div id="map"></div> <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <script> var map = L.map('map').setView([45.418393, 10.969487], 13); // Replace with your default map center L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap contributors' }).addTo(map); var marker = L.marker([45.410051797705904, 10.90330758434609]).addTo(map); </script> </body> </html> 尝试使用自定义图标,但仍然遇到同样的问题 var LogoPin = L.icon({ backgroundColor: 'transparent', iconUrl: './pin.png', shadowUrl: './shad.png', iconSize: [30, 47], // size of the icon [38,95] shadowSize: [50, 64], // size of the shadow*/ iconAnchor: [22, 94], // point of the icon which will correspond to marker's location shadowAnchor: [4, 62], // the same for the shadow*/ popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor }); L.marker([place.lat, place.lng], {icon: LogoPin}).addTo(map); 对于OpenStreetMap,使用自定义标记(yourown.png)的方法之一是使用OpenLayers.icon指定标记png(透明),然后将此图标用作OpenLayers.Marker,如下: var size = new OpenLayers.Size(32,32); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var icon = new OpenLayers.Icon("https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png", size, offset); var markers = new OpenLayers.Layer.Markers("Markers") map.addLayer(markers); markers.addMarker(new OpenLayers.Marker(position, icon)); 所以你可以尝试以下(完全工作的代码) <div id="Map" style="height: 250px; width: 400px" ></div> <script src="http://www.openlayers.org/api/OpenLayers.js"></script> <!--<script src="js/osm/api/OpenLayers.js"></script>--> <script> var lat = 55.676098; var lon = 12.568337; var zoom = 11; var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984 var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection var position = new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection); map = new OpenLayers.Map("Map"); var mapnik = new OpenLayers.Layer.OSM(); map.addLayer(mapnik); ////////////////// var size = new OpenLayers.Size(32,32); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var icon = new OpenLayers.Icon("https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png", size, offset); var markers = new OpenLayers.Layer.Markers("Markers") map.addLayer(markers); markers.addMarker(new OpenLayers.Marker(position, icon)); ////////////////// disable default marker // var markers = new OpenLayers.Layer.Markers("Markers");//("Images/Icons/map-marker.png"); // map.addLayer(markers); // markers.addMarker(new OpenLayers.Marker(position)); //////////////// END map.setCenter(position, zoom); </script>

回答 1 投票 0

将图像放置在浏览器100%宽度和100%高度的div中

嗨,这个问题确实很简单,但无法弄清楚。 我想用图像填充浏览器,以便无论用户在浏览器中设置大小,我的图像都会填充内容。 我也需要

回答 5 投票 0

如何在 html 文件输出中显示 python 程序的结果

我试图创建一个扩展来搜索谷歌并允许用户访问前 10 个左右的结果,我用 python 做了谷歌搜索代码并拥有扩展的代码,但我没有......

回答 1 投票 0

配置 WebAssembly/Emscripten 本地构建问题

我是 WebAssembly/Emscripten 世界的新手。 我找到了这个例子,我想在本地尝试一下(mac OS)。这些是我的文件: #包括 #包括 #包括...

回答 1 投票 0

Div 的显示:用户代理样式表不会覆盖任何内容,但可以在本地工作

我的网站上有这段代码: 我的网站上有这段代码: <div class="test_section no_display" id="test_section_metric"> <div class="section_start_bar"> </div> <div class="section_end_bar"> </div> </div> 还有这段CSS: .test_section { width:70%; margin-left:15%; background-color: var(--color_main); } .no_display { display: none; } 但是会显示带有“no_display”类的 div,因为当我在 Chrome 中检查站点时,我发现它使用用户代理样式表覆盖了它,如下所示: div{ display:block; } 但是,当我在计算机上以文件形式打开该网站时,它实际上没有显示并且按预期工作。 我已经在寻找答案,但我遇到的大多数人都是通过在 <!DOCTYPE html> 标签之前放置 <html> 来修复它,我已经这样做了。 .no_display 类是一个单独的东西,因为它将被 javascript 删除以在单击按钮时显示内容。 有什么想法可以解决这个问题吗? 使用 css 属性 display: none !important; 将覆盖用户代理设置。检查类名和 css 类选择器拼写是否相同的奖励积分 😅 对于那些来到这里并尝试了一切但仍然失败的人来说,也许这个技巧可以帮助你。 就我而言,广告拦截器是在我的div中添加“用户代理样式表”display: none;的人。 禁用它解决了它!

回答 2 投票 0

CKEditor SelectionChange 无法正常工作

我正在使用 CKEditor 作为我的 Python、Flask 项目的一部分。我试图将用鼠标选择的文本传递到另一个“文本区域”。 ...

回答 1 投票 0

纯CSS切换显示与原生CSS冲突

情况如下: 我想用纯 CSS 切换两个 HTML 项目的显示。 特别是,使用纯 CSS 切换显示两种不同语言的内容。 处理完 CSS 的怪异之后...

回答 1 投票 0

在overflow:hidden中显示隐藏元素

我有多个彼此相邻的步骤,其中一些由于溢出而被隐藏:隐藏。我想展示实现这些目标的隐藏步骤。 从右到左的示例:c 后面的数字...

回答 1 投票 0

如何水平对齐这些复选框?

我正在尝试水平和垂直对齐这些单选按钮/复选框,我也希望文本位于它们的左侧。我尝试了一些诸如内联和块之类的东西,但我是相当初学者并且正在尝试......

回答 1 投票 0

在VueJS中,如何生成一个组件来渲染具有固定列数和自动分配单元格的表格?

下午好。 我目前正在使用以下 VueJS 组件: 下午好。我目前正在使用以下 VueJS 组件:<template> <div> <table> <tbody> <tr v-for="(item, index) in items" :key="index"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.price }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { items: [ id: 1, name: "Item 1", price: 10.99 }, id: 2, name: "Item 2", price: 20.50 }, id: 3, name: "Item 3", price: 15.75 }, id: 4, name: "Item 4", price: 15.75 } ] }; } }; </script> 我想修改该表的行为。我试图强制该表总共有 3 列。表格单元格应从左到右、从上到下填充(始终确保有 3 列)。例如,考虑上面定义的变量“items”,表格应如下所示:-------------------------------- | Item 1 | Item 2 | Item 3 | | Item 4 | ---------------------------- 我尝试使用“v-if”和“v-for”指令来完成此操作,但我不太明白如何使其“反应”(独立于列表元素的数量)。我发现强制每行仅包含 3 个元素有点令人困惑。我怎样才能做到这一点?非常感谢您的关注。致以诚挚的问候。预期结果应该是一张类似于上面提供的表格。 正如我的评论中提到的,不要使用表格,因为您不再有表格数据。 根据需要对任意数量的列使用 CSS 网格和样式。您甚至可以使用 CSS 媒体查询根据设备宽度调整列,这对于网格来说比使用列要容易得多。 这是一个快速的功能演示 代码: <script setup> import { ref } from 'vue' const msg = ref('Hello World!') const items = [ {id: 1, name: "Item 1", price: 10.99 }, {id: 2, name: "Item 2", price: 20.50 }, {id: 3, name: "Item 3", price: 15.75 }, {id: 4, name: "Item 4", price: 15.75 }] </script> <template> <div> <ul id="items"> <li v-for="(item, index) in items" :key="index"> <span class="id">Id: {{ item.id }}</span> <h2 class="name">{{ item.name }}</h2> <span class="price">{{ item.price }}</span> </li> </ul> </div> </template> <style> #items{ list-style: none; padding: 0; /* Make a grid */ display: grid; /*Make it 3 columns */ grid-template-columns: 1fr 1fr 1fr; grid-gap: 1em; } #items li {border: 1px solid black ; padding: 3px; } #items li .name{ text-align: center } #items li .price:before{ content: "$"; display:inline-block; } </style>

回答 1 投票 0

角度项目(html,css和js代码)

所以在我的角度项目中,我有4个组件(comp1,comp2,comp3,comp4),我找到了一个形式的代码(html,css和js),我想把它放在comp1中,所以告诉我我是否'我是否正确:我是否将...

回答 1 投票 0

如何让这个无限轮播发挥作用?

我有这个轮播,需要一个简单的操作:显示无限。问题在于动画被切断并在最后一个元素的末尾留下空白。我留下下面的代码然后...

回答 1 投票 0

为什么我的页面不会转到另一个页面,即使我使用与以前相同的方法?

因此,为了尝试学习一些网页设计和一点游戏/谜题设计,我决定尝试制作一个 ARG(另类现实游戏,如果你不知道的话)和所有普通页面。 ..

回答 1 投票 0

如何测试按钮的disabled属性?

我有一个像这样的简单模板组件: @成分({ 标签:“应用程序填充按钮”, styleUrl: 'filled-button.css', 阴影:真实, }) 导出类 FilledButton { @Prop() 禁用:布尔值;

回答 1 投票 0

我似乎无法让我的表单提交将文件从 jsx 跳转到 js

我对反应还很陌生。到目前为止大约花了 3-4 天的时间来研究它,所以我可能只是做了一些愚蠢的事情。我的问题是我有一个仅包含可以提交的文本区域的表单。里...

回答 1 投票 0

CSS 中 div 的替代行颜色

我正在尝试使用 nth-child(odd) 向 div 添加替代行颜色。 我需要为类名为 Alternative_cls 的 div 添加替代颜色,但不为具有

回答 4 投票 0

如何在HTML元素中设置数据属性

我有一个带有属性 data-myval =“10”的 div。我想更新它的值;如果我使用 div.data('myval',20) 不会改变吗?我只需要使用 div.attr('data-myval','20') 吗? 我得到确认了吗...

回答 7 投票 0

在 ASP 中找不到网址:http://localhost:XXX/login 的网页。 NET CORE 6 网络应用程序

我在 ASP.NET Core 6 中使用 razor 页面创建了一个 Web 应用程序,在向 _Layout.cshtml 添加新的 razor 页面链接时遇到了问题。每次我尝试测试网站...

回答 1 投票 0

如何在加载CSS文件时停止HTTP错误状态代码404

我已经开始使用 Visual Studio 代码和实时服务器来练习制作网站,但 main.css 文件未随 index.html 一起加载。 当使用开发工具时,它似乎是旧版本......

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.