//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>

//css

.shipin{
margin-top: 1.5625rem;
display: flex;
justify-content: center;
}

.shipin video{
width:100%;

height:100%;
object-fit: fillidth: 100% !

}

html页面引用video.js播放m3u8格式视频的更多相关文章

  1. 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...

  2. 流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    源码地址:https://github.com/Tinywan/PHP_Experience 总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播 播放器:Vid ...

  3. video.js支持m3u8格式直播

    为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. v ...

  4. 前端播放m3u8格式视频

    一.前端播放m3u8格式视频 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars ...

  5. 微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  6. 在vue项目中播放m3u8格式视频

    前言:最近公司在做一个线上会议的项目,要求后台网站播放m3u8格式的视频,查找部分资料,总结一下,方便后边查阅 1.在vue工程中安装以下依赖: cnpm install  video.js --sa ...

  7. vue中通过hls.js播放m3u8格式的视频

    近期做了一个功能,是接入一个海康的摄像头的监控视频,怎么获取m3u8的视频这里就不在叙述了,只说一下怎么将m3u8格式的视频成功播放 一.m3u8和HLS介绍 1.M3U8文件是指UTF-8编码格式的 ...

  8. 移动端播放直播流（video.js 播放 m3u8 流）

    流媒体服务器: wowza 流媒体格式: m3u8 播放端:移动端网页(Android.IOS) 播放工具: video.js 代码如下: <!DOCTYPE html> <html ...

  9. React 基于antd+video.js实现m3u8格式视频播放及实时切换

    文档连接地址(官网看起麻烦,看中文别人整理好的)https://blog.csdn.net/a0405221/article/details/80923090 React项目使用  安装依赖 npm ...

随机推荐

  1. 树莓派ssh总掉线

    之前入手了一个树莓派,但是远程ssh连接经常掉线,开始以为是电源不行,导致机器重启,后面加了一个显示器,观察了一段时间,发现机器并没有重启,应该是WiFi掉线了,在网上发现,树莓派如果一段网络没有流量 ...

  2. JS的函数和对象一

    1.递归 在函数的内部调用自身,默认是一个无限循环. 2.匿名函数 没有名称的函数  function(){   } (1)创建函数 函数声明 function fn1(){   } 函数表达式 va ...

  3. 破坏之王DDoS攻击与防范深度剖析【学习笔记】

    一.DDoS初步印象 1.什么是分布式拒绝服务攻击? 1)首先它是一种拒绝服务攻击 我们可以这么认为,凡是导致合法用户不能访问服务的行为,就是拒绝服务攻击. 注:早期的拒绝服务主要基于系统和应用程序的 ...

  4. SDK内本地化处理 localizedStringForKey:value:table:

    参考: 1,https://developer.apple.com/documentation/foundation/nsbundle/1417694-localizedstringforkey 2, ...

  5. Robot Framework（4）- 测试套件的基本使用

    如果你还想从头学起Robot Framework,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1770899.html 前言 因为是基于 ...

  6. var、let、const三者的区别

    var定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问. let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问. const用来定义常量,使用时必须初始化(即必须赋值),只能 ...

  7. 【JUC】CyclicBarrier和Semaphore的使用

    CyclicBarrier的使用 CyclicBarrier:可以让一组检测到一个屏障时被阻塞,直到最后一个线程到达屏障时,屏障才会开门,所有的屏障拦截的线程才会继续执行,线程进入屏障通过Cyclic ...

  8. [C#] [VS] Snippets快捷代码块之 Region

    代码长了,阅读起来不方便, 于是,C#中我们经常会用 region来折叠代码块. 在VS中,输入 #region , 点Tab,会自动生成如下: #region MyRegion #endregion ...

  9. [ES6系列-02]Arrow Function：Whats this？(箭头函数及它的this及其它)

    [原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 如果没用过CSharp的lambda 表达式,也没有了解过ES6,那第一眼看到这样代码什么感觉? /* eg.0 * fu ...

  10. 实现.Net程序中OpenTracing采样和上报配置的自动更新

    前言 OpenTracing是一个链路跟踪的开放协议,已经有开源的.net实现:opentracing-csharp,同时支持.net framework和.net core,Github地址:htt ...