//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. python--遇到SyntaxError: Non-UTF-8 code starting with '\xb8' in file

    在运行python中因为添加了中文注释,遇到SyntaxError: Non-UTF-8 code starting with '\xb8' in file 经过百度,说是Python的默认编码格式是 ...

  2. 【白嫖】IT笔试面试真题讲解系列文章+视频

    视频讲解IT公司面试的高频考题~ 持续更新中,欢迎点赞转发~ 干货|名企高频考点指令篇-查看Linux硬盘空间使用情况 干货 | 名企高频考点指令篇-Linux查看CPU内存和系统版本 干货 | 名企 ...

  3. 【SMB源码解析系列】——003.SMB游戏基本框架

    前面有了解到RESET中断相关代码,结尾处通过一句jmp进入了无限循环,之后CPU将会在每一帧PUU进入VBlank状态时,接收NMI中断信号, 跳转至NMI代码处继续执行,直到遇见RTI指令时又返回 ...

  4. 2018-06-18 sublime代码编辑器

    sublime代码编辑器:主流前端开发编辑器,体积较小,运行速度快,文本功能强大,支持VI扩展,linux下面有个自带的文本编辑神器,名字叫做:vi ,熟练vi模式可以大量减少使用鼠标的次数,从而增加 ...

  5. JVM系列（2）-GC

    1.什么是GC? 大白话说就是垃圾回收机制,内存空间是有限的,你创建的每个对象和变量都会占据内存,gc做的就是对象清除将内存释放出来,这就是GC要做的事. 2.需要GC的区域 说起垃圾回收的场所,了解 ...

  6. .NET 程序员的 Playground ：LINQPad

    如果想执行一个简单的 C# 语句并获得运行结果,通常我们需要做几个步骤才能达成: 打开 Visual Studio 并新建一个控制台项目. 在 Program.cs 中编写代码并保存. 点击运行按钮或 ...

  7. 桥接模式（c++实现）

    外观模式 目录 外观模式 模式定义 模式动机 UML类图 源码实现 优点 缺点 总结 模式定义 桥接模式(Bridge),将抽象部分与它的实现部分分离,使他们都可以独立的变化.什么叫抽象与他的实现分离 ...

  8. HTML5新特性 websocket(重点)--多对多聊天室

    一.html5新特性  websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...

  9. 2.3 Go内置函数

    内置函数 Go 语言拥有一些不需要进行导入操作就可以使用的内置函数.它们有时可以针对不同的类型进行操作,例如:len.cap 和 append,或必须用于系统级的操作,例如:panic.因此,它们需要 ...

  10. 根据ip查询ip归属地

    http://www.oschina.net/code/snippet_944819_33978 http://www.jb51.net/article/54287.htm public String ...