//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. linux-Curl error (37): Couldn't read a file:// file for file:///etc/pki/rpm-gpg/RPM-GPG-KEY-fedora-x86_64 [Couldn't open file /e tc/pki/rpm-gpg/RPM-GPG-KEY-fedora-x86_64]

    在安装Python3-pip 的时候遇到 [root@localhost rpm-gpg]# yum install python3-pipFedora 31 - x86_64 - Updates - ...

  2. 一个数组求其最长递增子序列(LIS)

    一个数组求其最长递增子序列(LIS) 例如数组{3, 1, 4, 2, 3, 9, 4, 6}的LIS是{1, 2, 3, 4, 6},长度为5,假设数组长度为N,求数组的LIS的长度, 需要一个额外 ...

  3. redis主从复制、主从延迟知几何

    本片章节主要从 redis 主从复制延迟相关知识及影响因素做简要论述. 1.配置:repl-disable-tcp-nodelay 也即是TCP 的 TCP_NODELAY 属性,决定数据的发送时机. ...

  4. apache httpd 不记录head 的请求。

    比如说用了阿里云的slb ,然后他会检测服务器是否正常运行,通常会发大量的HEAD 请求过来. 这样有规则的请求是可以屏蔽的.步骤如下: 在 <Directory />中添加 SetEnv ...

  5. POJ1321棋盘问题（DFS)

    Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子 ...

  6. 07 返回多个页面web框架

    07 返回多个页面web框架 服务器server端python程序(不同页面版本): import socket server=socket.socket() server.bind(("1 ...

  7. 最香远程开发解决方案！手把手教你配置VS Code远程开发工具，工作效率提升N倍

    文章每周持续更新,原创不易,「三连」让更多人看到是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 今天和大家分享远程开发工具,分享一下我平常是如何用 V ...

  8. 关于MYSQL 和INNODB的逻辑关系图。最好的理解是一点点动手做，观察，记录，思考。

    每隔0.1秒就刷一次MYSQL文件的变化,并闪动标示出来,以观察SQL执行时,MYSQL的处理顺序. watch -n 0.1 -d stat /var/lib/mysql/ib_logfile0 / ...

  9. SpringBoot之整合MongoDB

    MongoDB官网安装:https://www.mongodb.com/download-center/community MongoDB客户端工具(Mongo Management Studio)安 ...

  10. 第三方动画库 Lottie嵌入记录

    预览网址 https://lottiefiles.com/preview   在Podfile文件中加入 pod 'lottie-ios’ pod install 把 lottie-ios加入到项目中 ...