开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

html5中的hls在android chrome浏览器中不起作用。

基础概念

HLS（HTTP Live Streaming）是一种由苹果公司开发的流媒体传输协议，主要用于实时或点播的流媒体传输。它通过HTTP协议传输数据，支持自适应比特率流（ABR），可以根据网络状况动态调整视频质量。

优势

自适应比特率：HLS可以根据网络带宽自动调整视频质量，保证流畅播放。
跨平台支持：HLS被广泛支持，包括iOS、Android、Web等平台。
易于实现：HLS基于HTTP协议，易于实现和部署。

类型

HLS主要分为两类：

直播流：实时传输视频数据。
点播流：按需传输视频数据。

应用场景

HLS广泛应用于在线视频、直播、点播等场景，特别适合需要自适应比特率的移动端应用。

问题分析

在Android Chrome浏览器中，HLS不起作用可能有以下原因：

浏览器兼容性：虽然大多数现代浏览器支持HLS，但某些旧版本的Android Chrome可能存在兼容性问题。
服务器配置：HLS流媒体服务器配置不正确，导致无法正确传输数据。
网络问题：网络不稳定或带宽不足，导致HLS流无法正常加载。

解决方法

检查浏览器版本：确保Android Chrome浏览器是最新版本，以获得最佳的HLS支持。
服务器配置：确保HLS流媒体服务器配置正确，特别是M3U8文件和TS片段的路径和权限设置。
网络检查：确保网络连接稳定，带宽充足。
使用Polyfill：如果浏览器兼容性问题仍然存在，可以考虑使用HLS.js等Polyfill库来增强HLS支持。

示例代码

以下是一个简单的HTML5页面示例，使用HLS.js播放HLS流：

<!DOCTYPE html>
<html>
<head>
    <title>HLS Player</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
    <video id="video" controls></video>
    <script>
        if (Hls.isSupported()) {
            var video = document.getElementById('video');
            var hls = new Hls();
            hls.loadSource('https://example.com/path/to/master.m3u8');
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.play();
            });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = 'https://example.com/path/to/master.m3u8';
            video.addEventListener('loadedmetadata', function () {
                video.play();
            });
        }
    </script>
</body>
</html>

参考链接

通过以上方法，您应该能够解决Android Chrome浏览器中HLS不起作用的问题。如果问题仍然存在，建议进一步检查服务器日志和网络状况。

相关搜索:Android自动填充服务在Chrome中不起作用动画脚本在Chrome以外的浏览器中不起作用在以下代码中，HLS在exoplayer中不起作用预置在android浏览器中不起作用按键在android浏览器中不起作用 Webcam.js在chrome浏览器中不起作用浏览器操作在无头chrome中不起作用 HTML5 datetime组件在浏览器中不起作用 google chrome浏览器中的React Native Android深度链接为什么在Android的Chrome中onkeydown方法返回false不起作用？Chrome中的HTML5仪表样式 chrome中的html5 seek问题无法在react js中的chrome浏览器中编译 Android Chrome中的静默打印 Vimeo在lightbox中-全屏在chrome中不起作用 Android Chrome中的"text-underline-position: under“不起作用 scrollTop = scrollHeight在Chrome中不起作用显示属性在chrome中不起作用 javascript toggleclass在chrome中不起作用在rails中的chrome浏览器中打开URL的脚本

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

chrome安卓WebView调试出现空白页面的解决方案

最近在调试一个通过webview打开本地html的页面。出现了: 404 Not Found The resource could not be found

02

自动化-Appium-第一个Demo-Web（Python版）

本章Web所指的是移动端（模拟器/真机）里的浏览器（如：Chrome、Safari）。

01

自动化-Appium-第一个Demo-Web（Java版）

本章Web所指的是移动端（模拟器/真机）里的浏览器（如：Chrome、Safari）。

01

overflow的一些小细节笔记

最近在项目中遇到一个问题，同事在IE浏览器下测试时出现底部大块空白的问题。如下图：

00

在HTML5上开发音视频应用的五种思路

无论是实时视频监控还是直播点播等应用场景，最起码的一个操作就是播放视频。其中最基本的思路就是利用OS的API在PC开发桌面应用、在移动端开发Native App，目前这种技术已经成熟，大厂小厂都是这么做的，但是缺点也很明显：开发比较费时费力，需要IOS开发一遍再去Android开发一遍。特别对于一些非刚性需求比如用户家里有一两个监控摄像头，一个礼拜也不会打开看几次，你却要他下载和安装一个APP进行操作，用户安装意愿其实非常低。

03

几招解决超级播放器Error Code:4

市面上播放器千千万，比如我们常见的有Video.js、hls.js、点播超级播放器等。其中点播超级播放器是基于 video.js 框架并结合腾讯云点播业务而开发的视频播放器，采用以 HTML5

谷歌、微软抛弃Flash：HTML5播放器的时代即将到来

时间到了2020年，大家打开Chrome浏览器，“又”会收到一条警告。转眼之间，离Chrome停用Flash只剩8个月。

02

基于HT for Web的Web SCADA工控移动应用

在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年，早先年的Web SCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案，在

03

怎么把浏览器ua改成PC就可以了_手机自带浏览器怎么改成电脑版

右击桌面上的Chrome浏览器图标，在弹出的右键菜单中选择“复制”，复制一个图标副本到桌面。右击该副本，选择“属性”，打开相应的对话框，在“目标”文本框的字符后面添加以下语句： –user-agent=”Android”，如下图：

01

基于HT for Web的Web SCADA工控移动应用

05

你可能不知道，前端这6个有用的技术可以这么酷！

为了让大家编程更轻松一些，本挑选一些有用的但相对比较少见有用的技巧。废话不多说，开车了。

04

基于HTML5的Web SCADA工控移动应用

在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年，早先年的Web SCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案，在HTML5流行前VML和SVG算是真正纯种Web方案也是有不少应用，近些年随着HTML5的流行，加上移动终端对HTML5支持的普及，越来越多新项目开始采用真正纯HTML5的方案，更具体的说大数据量应用性能高于SVG的Canvas方案，已经逐渐成为当今Web SCADA前端技术的首选标配方案。 http://ww

02

直接上源码教你做经典HTML5小游戏

HTML5因其跨平台性的特质已逐渐成为网络游戏开发的热门新技术。过去，flash多媒体应用可以用来构建线上游戏，也是小游戏的主流形态，但是随着HTML5的到来，改变了线上游戏的构建方法，用HTML5制作游戏相比flash更加灵活方便。

02

Normalize.css ——CSS Reset的友好替代品

最近才第一次接触这个Normalize.css，之前Jeff 都是采用CSS Reset的，但如今发现现在流行这个Normalize.css 了。自己也查阅了不少资料去了解，现在权当是笔记放在这里吧。 Normalize.css 简介官方网站：http://necolas.github.io/normalize.css/ 浏览器支持情况：Chrome, Firefox, Opera, Safari 6+, IE 8+ Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的

09

安防视频流媒体服务器Easy NVR搭建之DASH直播平台的搭建需要具备哪些条件？

当前，全球各大视频网站均在抛弃陈旧的Flash播放技术，转而向Dash这种新型的流媒体传输方式靠拢。比如，Youtube，Hulu，Twitch，Netflix，Xvideos，PornHub，xHamster，Tube8等视频网站平台；三星、LG、飞利浦、SONY等智能电视厂商。而且，全球最大的CDN服务提供商也已经支持Dash标准，比如Akamai CDN。

02

HTML学习——第0篇

版权声明：本文为博主原创文章，转载请注明博客地址： https://blog.csdn.net/zy010101/article/details/85267209

01

Flash之后是不是该IE浏览器了

Adoebe官方网站发布了公告，2020年12月30日起终止支援Flash。目前Chrome、Edge等浏览器都会有提醒。用户默认不开启Flash，如果页面视频采用Flash进行播放，都会收到如下提示：

02

html5中如何解决canvas图片跨域问题-canvas无法导入远程图片

今天我们来说说在开发中比较常谈及的问题，那就是跨域问题，我们就来说说在：“html5中如何解决canvas图片getImageData,toDataURL跨域问题?”这个问题吧！

06

Bootstrap

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。 Bootstrap支持响应式布局!响应式布局指的是一个网站能够兼容多种终端设备访问!. 终端设备:..电脑、平板电脑、手机

03

熊猫TV直播H5播放器架构探索

大家知道HTML5播放器曾被广泛运用于视频点播，而今天我想与大家分享的是运用在直播领域的HTML5播放器。现在熊猫已不再使用FLVJS作为播放器了，所以今天与大家探讨一下直播HTML5播放器的技术难点与架构探索。

02

前后端分离后的前端时代，使用前端技术能做哪些事？

什么是前后端分离，要区分前端和后端，需要有个明确的界限。一般，用户可以直接看到的东西，都是属于前端的范畴，除了前端之外都属于后端了。

03

HTML meta 标签

最近做的一个关于电影的网站 IMDB Top250，想对其进行 SEO 优化，用到 meta 信息的时候，很多知识都是『似乎』、『好像』、『可能』的感觉，回想自己一直没有系统的学习过 meta 相关的知识，这些东西虽然简单，但是很多时候能发挥出意想不到的效果，尤其对于 SEO 有非常重要的作用。

03

如何从海量用户中轻松定位H5视频播放器问题？

一、方案背景介绍随着互联网技术的发展，用户使用QQ浏览器进行上网观看视频越来越多，最近统计目前使用QQ浏览器观看视频已经过亿。不同的用户由于不同的场景下播放不同的网站的视频源，可能会出现播放失败的情况，而这些失败的播放数据会通过数据上报系统上报至运营后台，将后台拉取数据并经过一定的分析，就能得到播放失败的网站、机型、时间、网络状态等信息，下图是最近后台统计的播放失败率最高的几个视频网站，如下图所示：当然播放失败可能有多种原因而导致的，例如：浏览器对该种类型的网络视频不兼容、网络视频本身出现问题、用

08

Android H5元素定位

在混合开发的App中，经常会有内嵌的H5页面。那么这些H5页面元素该如何进行定位操作呢？

02

对html与body的一些研究与理解

最近一直构思着写篇关于<html>标签的文章，虽说之前处理过<html>标签，也解决过不少棘手的问题，但是对其理解还不是很透彻，很多原理都是自己推测的。

03

【WebApp开发必知】移动游览器私有Meta属性

Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。下面就给大家整理一下在移动端的各大浏览器一些私有的Meta属性。

02

HTML5点击全屏的方法

这个按钮是？我移了好几遍，没有title提示。图形也不具有代表性，一个圈圈意思是？——圈人？？是不是啊？？不敢点，点了不知道会发生什么，浏览器会不会关掉！！我思想斗争做了很久，终于弱弱地点了一下~~

03

HTML第六课——盒子模型的应用【1】

这里就是这个li标签里的所有属性了，我们在做开发时可以直接修改这里的属性值，然后直接在页面中查看效果，比如我现在在这里加一个

02

常见的WebStrom使用技巧和Chrome使用技巧

自己平时总结的一些使用WebStrom的使用技巧和Chrome浏览器使用技巧 WebStrom使用技巧标签名 + Tab键可以快速输入一个标签例如：div + Tab键可以快速输入：

选中代码按下 Ctrl + D 可以同时实现复制和粘贴左手按住Alt键，右手按住鼠标左键往下拉可以选中下拉线上的内容在WebStrom中输入div*10并且按下Tab键可以一次性输入10个div 在WebStrom中输入div{item$}*10并且按下Tab键可以一次性输入10个div并且div

02

自动化-Appium-第一个Demo-混合（Python版）

App是移动混合应用程序，即在移动应用程序中嵌入了Webview，通过Webview访问网页。

02

13款用于Web的流行HTML5视频播放器

点击上方“LiveVideoStack”关注我们 ▲扫描图中二维码或点击阅读原文▲ 了解音视频技术大会更多信息 ---- 翻译：Alex 技术审校：章琦本文来自OTTVerse，作者为Krishna Rao Vijayanagar。播放器 Easy-Tech #033# 当视频流媒体席卷通信世界，为了保持和提升用户增长，内容创造者和流媒体服务提供者需要提供高质量的用户体验。而想要实现这一点，他们都需要在自己的网站上内嵌HTML5视频播放器。在本文中，我们将来了解一下现在市面上可用的HTML5

02

伪元素动画和转换的例子

一些创造性的实验使用伪元素上的动画和转换来创建有趣的效果。今天，我们将尝试动画和伪元素（：之前和之后）的转换，我们将发现它们的潜力。我们将讨论一下关于动画伪元素的一些问题，并看看四个使用一些特殊技术来实现各种效果的例子。我们首先来看看使用动画和转换以及伪元素的优点和缺点。优点简化和优化HTML标记利用CSS3的能力有助于设计缺点只支持Firefox，IE10和最近的Chrome浏览器（请参阅此更新的支持表了解更多信息）在移动浏览器中不起作用伪元素不能由ID标识伪元素不出现在DOM中

05

兼容性测试工具分享

有多少朋友做过浏览器兼容性测试？怎么做的，效率怎么样，是在不同的机器上下载不同的浏览器进行效果确认？有多少人对浏览器的兼容性测试犯过愁？　　本人曾经也对浏览器的兼容性感到头痛，后来到网上找了些资料和工具，虽然未能彻底解决所遇到的问题，不过多少有些帮助，特此分享给大伙，若大伙有什么更好的工具或是经验方法还希望能拿出来晒一晒。　　鄙人主要尝试过这几个工具:IETester, SuperPreview,Browsershots，Browser Sandbox。下面分别说一下。 IETester 估计工作

08

控制台禁用js_禁止直接访问js

浏览宽高变化监测主要是监测浏览器可视区域的宽高：window.innerWidth / window.innerHeight（滚动条和内容区）和浏览器宽高：window.outerWidth / window.outerHeight（inner的基础上加上工具条的宽高）之间的差值。

02

超级播放器tcplayer如何设置logo

点播超级播放器是基于 video.js 框架并结合腾讯云点播业务而开发的视频播放器，采用以 HTML5

03

HTML Meta中添加X-UA-Compatible和IE=Edge，chrome=1有什么作用

这是一个文档兼容模式的定义。主要用于加强代码对IE的兼容性，强制IE使用当前本地最新版标准模式渲染或者用chrome内核渲染。

02

EasyNVR纯H5摄像机直播解决方案前端解析之：RTSP安防监控实时直播的网页H5自动播放方案

我们很多安防、互联网、直播的应用场景中，在打开一路直播流后，极少看到需要点击播放按钮才能直播播放视频流的情况，但是由于H5场景的播放需要兼容的浏览器非常多，这样的情况下经常会遇到各种各样的摄像机网页播放的问题，比如这里解析的视频流自动播放的问题：

02

提升Selenium在Chrome上的HTML5视频捕获效果的五个方法

在使用Selenium进行网页自动化测试时，捕获HTML5视频是一个常见的需求。然而，许多开发者发现，在使用Chrome浏览器时，视频捕获效果并不理想，经常出现视频背景为空白的问题。本文将概述五种方法，帮助提升Selenium在Chrome上的HTML5视频捕获效果。

01

RTSP？不存在的 -> 前端实时流探索记

传送门：https://segmentfault.com/a/1190000022994032

05

如何使用视频流媒体服务器支持HTML5直播？

视频直播这么火，再不学就out了！为了紧跟潮流，本文我也将向大家介绍一下视频直播中的基本流程和主要的技术点，包括但仅不限于前端技术。

01

Android 浏览器内核浅谈[通俗易懂]

目前，移动设备浏览器上常用的内核有Webkit，Blink，Trident，Gecko等，其中iPhone和iPad等苹果iOS平台主要是WebKit，Android 4.4之前的android系统浏览器内核是WebKit，Android4.4系统浏览器切换到了Chromium(内核是Webkit的分支Blink)，Windows Phone 8系统浏览器内核是Trident。

04

webkit研究(1)

以360极速浏览器为例子，大家可能会以为该浏览器与chrome浏览器有关，其实关系不大，360极速浏览器是基于Chromium改的，而Chromium也是chrome背后的浏览器，chrome也是基于Chromium改进的，所以说360极速浏览器其实和chrome是兄弟关系啊！再来看看Chromium，原来Chromium是基于webkit内核(v28之前，现为Blink)开发的！

04

TRTC Web SDK + 播放器 Web SDK 实现 CDN 直播观看

在使用腾讯的TRTC Web SDK可以在Web端实现主播的直播流推送和观众的拉流观看，但是由于 TRTC 采用 UDP 协议进行传输音视频数据，在直播时可能会遇到一些问题：

00

【教程】谷歌浏览器移到其他盘之后，本地网页代码无法用谷歌浏览器打开的解决办法

但是，将默认安装在C盘的谷歌浏览器移到其他盘之后，好多默认的设置就失效了，怎么办呢

03

一篇读懂HTML5引擎性能之王LayaAir

性能是HTML5引擎最核心的指标，性能一旦出现瓶颈，就会限制策划的系统设计，限制美术的画面表现。譬如，近期有CP吐槽“本欲使用某引擎设计5 V 5的战斗，同屏跑10个人物骨骼动画后就跪了，从此再也不敢用骨骼动画”。性能之坑，可见一斑。

02

浏览器javascript 下载m3u8视频合成mp4

download m3u8 URL to mp4 下载m3u8视频合成一个完整的mp4 源码：https://github.com/ccjy88/m3u8download.js

02

总结了一下这几款视频播放器，总有一款适合你

1、西瓜视频播放器（XGPlayer）西瓜团队出品，到目前为止在github上已经斩获4.5K颗星。支持播放格式：MP4、HLS、FLV、MPEG-DASH 兼容性： PC Web端支持直接播放mp4视频，播放HLS、FLV、MPEG-DASH需要浏览器支持Media Source Extensions iOS系统Web场景支持直接播放mp4和HLS，不支持播放FLV、MPEG-DASH 安卓系统Web场景支持直接播放mp4和HLS，播放FLV、MPEG-DASH需要浏览器支持Media Source Extensions 之前我有写过一篇文章，可以查看具体的使用方法 2、flv.js播放器，HTML5 视频播放器以纯 JavaScript 编写，不含 Flash。 bilibili出品，到目前为止在github上已经斩获20.2K颗星。兼容性： Chrome, FireFox, Safari 10, IE11 和 Edge 3、chimee H5播放器奇舞团视频云出品，到目前为止在github上已经斩获2.3K颗星。支持格式： mp4、m3u8、flv 等多种格式 4、DPlayer：是一个支持弹幕的 html5 视频播放器。到目前为止在github上已经斩获11.8K颗星。支持格式：HLS，FLV，MPEG DASH，WebTorrent

01

Bitmovin: 视频开发者报告 2018

今年的视频开发者报告（Video Developer Report）在发布前总共收到了来自6大洲67个国家的456份调研问卷。该报告旨在对当前工业界使用的视频技术进行较为全面的梳理，并对下一年的行业发展趋势做出大致的预测。本文对该报告中的关键内容进行了整理。（注：由于调研问卷的选项可以多选，所以以下图表中的百分比之和不一定是100%）

05

前端成神之路-HTML

查看网站： http://tongji.baidu.com/data/browser

02

【Hybrid】288- Hybrid App 应用开发中 9 个必备知识点复习

前言我们大前端团队内部 ?每周一练的知识复习计划继续加油，本篇文章是《Hybrid APP 混合应用专题》主题的第二期和第三期的合集。这一期共整理了 10 个问题，和相应的参考答案，文字和图

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭