html5 video标签播放视频流，MP4格式，webm格式，video元素详解_video/webm-程序员宅基地
main.js中
"dependencies": {
"video.js": "^7.17.0",
}
<video id="my_video_1" class="video-js vjs-default-skin" width="100%" height="100%"
controls preload="none" poster='http://video-js.zencoder.com/oceans-clip.jpg'
data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
<source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
<source src="https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8" type='application/x-mpegURL' />
</video>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
</script>
引入就能用
接下来详细介绍一下
1. 元素支持三种视频格式：MP4、WebM、Ogg。
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
2.对应的type值：
MP4 => video/mp4
WebM => video/webm
Ogg => video/ogg
3.可选属性
- autoplay 如果出现该属性，则视频在就绪后马上播放。 谷歌高版本浏览器不允许自动播放，除非设置muted属性。
- controls 如果出现该属性，则向用户显示控件，比如播放按钮。 使用第三方播放器时，不添加该属性，以便使用自定义控件
- height pixels 设置视频播放器的高度。 不建议使用，使用CSS替换
- loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
- muted 如果出现该属性，视频的音频输出为静音。 只有设置这个属性视频才会自动播放
- poster URL 规定视频正在下载时显示的图像，直到用户点击播放按钮。 Poster建议分辨率：1280x720，以免在弱网环境下加载慢
- preload auto metadata none 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
- src URL 要播放的视频的 URL。 使用流媒体格式时，显示blob:开头的URL
- width 设置视频播放器的宽度。 不建议使用，使用CSS替换
参考文献： https://baike.baidu.com/item/video/9684144?fr=aladdin
欢迎大家补充及沟通呀~
智能推荐
windows 加 switchyomega + burp 抓https包-程序员宅基地
文章浏览阅读4.6k次。很简单，下载证书后导入到受信任根目录证书下载，直接在代理状态浏览器访问burp点击CA就可以下载了 设置该证书全部信任，，switchyomega 设置如下即可 就可以抓https的包了 ...
用C语言写循环赛日程表,循环赛的方法与编排-程序员宅基地
文章浏览阅读1k次。一、循环赛的种类与特点(一)循环赛的种类循环赛又称循环法。是指参赛队(或个人，下同)之间，都要互相轮流比赛，最后按照各参赛队在全部比赛中的胜负场数、得分多少排定名次的比赛方法。它在对抗性项目比赛中经常被采用。循环赛包括单循环、双循环或分组循环三种。单循环是所有参赛队(人)相互轮赛一次；双循环是所有参赛队(人)相互轮赛二次；分组循环是参赛队(人)较多时，采用种子法，把强队(人)分散在各组，先进行小组..._c语言循环赛互打一场比赛 甲队两胜
springboot项目访问html页面，发现端口不一致&继承WebMvcConfigurationSupport类会导致自动配置失效_springboot项目前端端口号不同怎么办-程序员宅基地
文章浏览阅读1.6k次，点赞4次，收藏6次。最后的解决方法“在config--WebMvcConfig中不要继承WebMvcConfigurationSupport,而是实现WebMvcConfigurer接口”，且不要在idea中直接点击浏览器图标打开对应的html页面，要自己在浏览器输入url。在本次debug过程中，更加清楚地明白了，springboot项目启动过程中，只扫描引导类同包或子包下的程序，而在resources目录下的静态资源文件(没放到)，需要被映射，才能被扫描到。_springboot项目前端端口号不同怎么办
k8s.配置管理.configmap&secret_configmap @value-程序员宅基地
文章浏览阅读80次。configmap 和secret 都需要提前创建configmap和secret都可以为pod提供挂载和变量的方式变量的方式有envfrom全部变量和valuefrom单个变量的引用configmap和secret 需要和引用的pod或者资源对象在同一个ns下。_configmap @value
System.TypeInitializationException: 'The type initializer for 'MySql.Data.MySqlClient.Replication.Re...-程序员宅基地
文章浏览阅读2.2k次。下午在调试的时候报错数据库连接就报错我就很纳闷后面用原来的代码写发现还是报错System.TypeInitializationException:'The type initializer for 'MySql.Data.MySqlClient.Replication.ReplicationManager' threw an exception.'应该是出在Mysql包上的问题..._system.typeinitializationexception:““mysql.data.mysqlclient.mysqlpoolmanag
树莓派上部署jeecg-boot快速开发平台_jeecgboot linux部署-程序员宅基地
文章浏览阅读249次。系统安装Ubuntu Server（可百度）更换软件源打开位置cd /etc/apt/编辑sources.listsudo nano sources.list使用清华的软件源镜像deb https://mirrors.ustc.edu.cn/ubuntu-ports/ focal main restricted universe multiversedeb https://mirrors.ustc.edu.cn/ubuntu-ports/ focal-updates main restricted univ_jeecgboot linux部署
随便推点
对Java和Linux的认识,Java类的认识-程序员宅基地
文章浏览阅读279次。Java使用类来构造自己的数据类型，类其实就是对一类数据和行为的数据封装；可以达到低耦合功能；Java注意啦：用类也是我们为了定义自己数据类型的一种方法，所以结构体，共用体也是一样的；都是为了处理数据而用的方法！类的存放问题： java源代码文件是以类为中心的，一个类的定义源码必须只在一个源文件实现；一个“文件名.java”文件名必须与文件中用public class 修饰的类名一致，java语法..._linux和java
快给你的Vue项目添加一个编辑图片组件吧_vue-image-editor-程序员宅基地
文章浏览阅读8.2k次，点赞20次，收藏59次。快给你的Vue项目添加一个编辑图片组件吧给大家推荐一款功能极其强大的图片编辑插件 tui.image-editor快速体验首选在你的前端项目中安装：npm i tui-image-editor// oryarn add tui-image-editor现在你就去新建一个.vue文件，复制进去下面这段代码：<template> <div id="tui-image-editor"></div></template><scr_vue-image-editor
Flutter混合开发-Null check operator used on a null value_flutter null check operator used on a null value-程序员宅基地
文章浏览阅读4.8k次。标题Flutter与Android混编在Android与Flutter混编中导入flutter的GetX框架时，配置getPages参数出错，在编译时不报错，但是运行之后，debug模式下出现红底白色的错误，错误显示为 Null check operator used on a null value，看一眼懵了,本地开发版本使用的是flutter2，配置的Getx库也确实在很早的版本中就支持了Null safety ,且配置的getPages为数组并且可为空，按照常理怎么也不可能出现这个错误！尝试的方案_flutter null check operator used on a null value
查看WIN10 SDK的版本_win10 sdk 版本好哪里查-程序员宅基地
文章浏览阅读4.4k次。查看WIN10 SDK的版本_win10 sdk 版本好哪里查
MFC C++改变控件字体大小颜色的方法_cfont设置字体大小-程序员宅基地
文章浏览阅读1.4k次。MFC C++改变控件字体大小颜色的方法_cfont设置字体大小
requests（网络请求库神器 ）库快速上手_requests 在线请求工具-程序员宅基地
文章浏览阅读202次。关于requests（网络请求库神器 ）库快速上手urllib、urllib2、urllib3、httplib、httplib2 都是和 HTTP 相关的 Python 模块，看名字就觉得很反人类，更糟糕的是这些模块在 Python2 与 Python3 中有很大的差异，如果业务代码要同时兼容 2 和 3，写起来会让人崩溃。好在，还有一个非常惊艳的 HTTP 库叫 requests，它是 ..._requests 在线请求工具