当前位置:首页 > 技术 > 正文内容

html页面引用video.js播放m3u8格式视频

Lavfun12个月前 (05-16)技术530
//head里面的内容,我是采用cdn引用的方式,因为项目太小

<head>
<meta charset="utf-8" />
<title>页面标题</title>
<script src="https://cdn.bootcss.com/video.js/7.7.6/video.min.js"></script>
<link href="https://cdn.bootcss.com/video.js/7.7.6/video-js.min.css" rel="stylesheet">
</head>

<div class="shipin">
<video id="my-player" height="350upx" width="850px" class="video-js" controls preload="auto" data-setup='{}'> 
<source src="路径"
type="application/x-mpegURL">
</video>
</div>
 
<sttle>
.shipin{
margin-top: 1.5625rem;
display: flex;
justify-content: center;
}

.shipin video{
width:100%;
height:100%;
object-fit: fillidth: 100% !
}
</style>


扫描二维码推送至手机访问。

版权声明:本文由 声光视趣 - lavfun.com 发布,如需转载请注明出处。

本文链接:https://www.lavfun.com/technical-forum/81.html

分享给朋友:

相关文章

DIV_P_SPAN等html标签的用法和区别

<div> </div> 盒子模型 用来做结构的,一般用它来布局 。<p> </p> 中间不可以放div标签,可以但不限于放文字,这个用起来有段落,p标签,可设置宽高的文字区块。<spa...

打开页面后自动刷新一次以加载内容

我只是搬运工,下列内容转载于网络:打开后延时1秒刷新页面一次:<SCRIPT LANGUAGE="JavaScript">  function refresh(){ &nbs...

DiscuzX更换域名的方法及步骤

下面先说更换域名的步骤方法:后台--全局--站点信息--网站 URL:后台--全局--域名设置--应用域名和根域名设置后台--界面--导航--连接里面的地址修改后台--运营--关联连接,没有设置就不用修改后台--云平台--同步站点信息后台-...

解决百度ueditor支持iframe框架页面的视频播放问题

新下载的ueditor 增加了xss 安全过虑,把iframe过滤了,导致发表的文章包含的视频播放功能被限制了。说明:新版本ueditor要修改 xss过滤白名单 修改配置文件ueditor.config.js ...

HTML图文内容快速另存/转换为Word文档的Docx格式的方法

HTML图文内容快速另存/转换为Word文档的Docx格式的方法

有时候,出于收集资料、收藏资料等目的,可能需要将网页上的图文内容保存下来,而且希望在有需要的时候可以对内容进行一定的编辑,那么保存为.docx的word文档会是最佳选择,那怎么才能把html网页里的图文内容快速保存为docx的word文档呢...

在自己网站嵌入B站视频代码,如何禁止自动播放和如何定位播放!

在自己网站嵌入B站视频代码,如何禁止自动播放和如何定位播放!

很多人在 B站 上传视频后,都会有转发到自己网站 或 个人博客的需求,B站也提供了一键复制网站嵌入代码,可以很方便的把B站的视频,引用转发到自己需要播放该视频的网站中去。B站视频播放页,有视频分享功能,可以很方便的 一键复制分享视频 代码,...