//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. springboot+vue前后端免费开源

    序言 继上一篇 一套管理系统基础模版 详细梳理一下安装流程,功能说明,开发规范等. 后端项目结构? 如何从零搭建环境开发? 如何打包部署? 接入开发及规范 项目地址 小结 后端项目结构 ​ shop- ...

  2. python100例 21-30

    021 猴子吃桃 题目:猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第10天早 ...

  3. ReactNative报错：Can't find variable: __fbBatchedBridge

    最近开始研究ReactNative,首先根据网上教程 http://www.codeceo.com/article/windows-react-native-android.html 一步一步来.完成 ...

  4. virtualbox复制了以后网卡启动不了。

    还是有些坑..必须踩 virtualbox复制了以后网卡启动不了.原因是如果没选重新生成mac ,那么mac地址会和第一台 机器一模一样,出现ip 征用的情况. 第二是系统方面的原因,你要删一个文件, ...

  5. 中国空气质量在线监测分析平台之JS加密、JS混淆处理

    中国空气质量在线监测分析平台数据爬取分析 页面分析:确定url.请求方式.请求参数.响应数据 1.访问网站首页:https://www.aqistudy.cn/html/city_detail.htm ...

  6. HTTP响应格式

    HTTP响应格式

  7. pipeline的使用示例

    搭建就不说了,直接示例如何使用pipeline. 一.以下输入参数:版本号为字符参数,按文档更新的是文本参数. 二.脚本对更新内容的处理如下: file_update_list="/home ...

  8. ABAP基础4：模块化

    子程序定义 以form开始,以endform结束,用perform语句调用,from语句可以在程序内部/外部,perform一定要写在前面 perform. from. 子程序模块 endform. ...

  9. zz 关于插入意向间隔锁( insert intention gap lock)产生的死锁问题

    出处: http://www.cnblogs.com/sunss/p/3166550.html 昨天看到一个很有意思的死锁,拿来记录下: 环境:deadlock on 事务隔离级别: read com ...

  10. Storm-Mongodb详解

    这两天研究Trident,踩坑踩的遭不住,来和大家分享下. 首先写入数据库: 先看官方API给我们提供的方法: //这是用来辅助下面MongoInsert的简单实现类 public class Sim ...