移动端内webview页面调试技巧_webview调试-CSDN博客

本文链接：https://blog.csdn.net/pfourfire/article/details/128321535

前言

长假七天乐确实很爽，只是疫情不稳定，还是呆在家里安全些，

在这宅在家的七天里，何不找点有趣的小demo耍耍

本期教大家制作一个能播放M3U8直播源的在线电视台网站，

既能学到知识技术，又可以方便在家看看电视节目，直播节目，何乐而不为

以下是实现的效果图：

这个小demo完成时间快两年了，所以里面有一些m3u8直播地址用不了

而且直播源的地址经常崩，所以会出现视频播放不了的情况

有需要直接百度搜 m3u8电视直播

具体实现

m3u8 以及 video.js介绍

为什么要介绍这两个东西呢？

因为我们大部分的电视直播在网络上都是m3u8格式的

m3u8准确来说是一种索引文件，使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址，从而实现在线播放。

我不喜欢太过于术语的解释。

简单来讲，我们看到的直播都是服务器把视频切片，然后一段一段给你发过来，客户端自己处理，整成视频给我们看

这就是 m3u8

但是浏览器并不支持video直接播放m3u8格式的视频

所以我们需要video.js来帮助我们，把这些切片的音视频给整成可以看的东西

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库

Video.js 可以自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器

咋解决这个问题呢，很简单，在html导入我们的video.js就可以了

<!DOCTYPE html>
<html lang="zn">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><<img src="https://cdn.bootcdn.net/ajax/libs/video.js/5.18.4/video-js.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/video.js/5.18.4/video.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>" style="margin: auto" />

引入之后呢，咋用？

在html标签上写上我们的元素,然后在js里面获取我们的播放器，

之后就可以自由用代码控制播放地址源，还有控制播放暂停等等功能

<video id="my-player" class="video-js" controls style="width: 800px;height: 500px;"> <source src="http://amdlive.ctnd.com.edgesuite.net/arirang_1ch/smil:arirang_1ch.smil/playlist.m3u8" type="application/x-mpegURL"> <p class="vjs-no-js">not support</p> </video>

// video.jsvar player = videojs('my-player', {});

function play_show(TV_m3u8){// alert("正在播放:"+TV_m3u8);document.getElementById("my_vedio_fixed").style.display="block";player.src([{type: "application/x-mpegURL",src: TV_m3u8}])player.play()}

具体学习video.js可以去 GitHub上去看

看不懂英文，右键翻译成中文就可以

以上的代码，我只是粗略的从我写的小demo中抓取出来，完整代码在下方。

<!DOCTYPE html>
<html lang="zn">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><<img src="https://cdn.bootcdn.net/ajax/libs/video.js/5.18.4/video-js.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/video.js/5.18.4/video.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script><title>kk电视直播</title><style> *{padding: 0;margin: 0;}body{background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);}/* 简单css实现瀑布流 */.masonry{column-count: 4;column-gap: 0;}.item{/* padding: 5px;padding会撑开盒子，改margin*/margin: 5px;position: relative;float: left;}.item img{display: block;width: 100%;height: auto; border-radius: 20px;}/* 遮罩 */.test{position: absolute;height: 100%;width: 100%;border-radius: 20px; background: rgba(0, 0, 0,0.3) url(./img/play.png) no-repeat center;display: none;}.item:hover .test{ display: block; cursor: pointer;" style="margin: auto" />

/* 字体引入 */@font-face {font-family: 'icomoon';src:url('./icomoon/fonts/icomoon.eot?iog1hg');src:url('./icomoon/fonts/icomoon.eot?iog1hg#iefix') format('embedded-opentype'),url('./icomoon/fonts/icomoon.ttf?iog1hg') format('truetype'),url('./icomoon/fonts/icomoon.woff?iog1hg') format('woff'),url('./icomoon/fonts/icomoon.svg?iog1hg#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}

/* 电视台信息 */
.imformation{width: 100%;height: 35px;position: absolute;bottom: 0;background-color: rgba(61, 60, 60, 0.425);border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;
}
.tv_name{line-height: 35px;font-size: medium;color: rgb(255, 255, 255);font-family: KaiTi;font-weight: 700;float: left;margin-left: 20