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
欢迎大家补充及沟通呀~
智能推荐
Ubuntu16.01安装配置qt5.7.1及卸载_qt5.7.1 ubuntu离线安装-程序员宅基地
文章浏览阅读1.2k次。背景因为目前在做一个ns3上搭建网络的实验，需要安装特定版本的qt。中间遇到了很多问题，来记录一下。问题描述ubuntu 16.04自带qt4，但我需要的是qt5（qt5.7+)。如果采用命令行安装qt5-default（很容易搜到的方法）：1.apt-get安装qtsudo apt-get install cmake qt5-default qtcreator安装的并不是指定版本..._qt5.7.1 ubuntu离线安装
【WebService】spring boot整合cxf发布webservice服务和cxf客户端调用_webservice cxf客户端调用-程序员宅基地
文章浏览阅读229次。spring boot整合cxf发布webservice服务和cxf客户端调用本案例使用maven方式核显文件清单服务端1.pom.xml<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="htt_webservice cxf客户端调用
Springboot添加非application.properties外的配置文件读取-程序员宅基地
文章浏览阅读1.9k次。 在开发SpringBoot的项目过程中，我们有时候为了区分和application.properties配置文件提供的默认配置，我们需要提供自己定义的配置文件如applicationDynamic.properties。在这里我介绍下如何读取自定义的配置文件，SpringBoot版本使用的是1.5.6.RELEASE。 1.定义自定义的配置文件applicationDyn..._springboot可以识别除了application之外的配置文件吗
计算机视觉入门-程序员宅基地
文章浏览阅读276次，点赞11次，收藏3次。需要注意的是，实践是提高技能的关键，因此在每个阶段都应注重动手实践和项目经验的积累。研究前沿技术：关注计算机视觉领域的最新研究成果，如深度学习的新模型、新算法等。方法：项目实践：选择一些计算机视觉的项目进行实践，如人脸识别、车牌识别等。目标：深入理解计算机视觉的核心概念，如特征提取、图像分割、目标识别等。掌握基础算法：学习图像处理的基本算法，如图像增强、滤波、边缘检测等。目标：在掌握基础知识和实践经验的基础上，进行更深层次的研究和创新。目标：了解计算机视觉的基本概念和原理，掌握图像处理的基础知识。
linux可以中断安装过程吗,linux 安装一个中断处理-程序员宅基地
文章浏览阅读445次。SA_INTERRUPT当置位了, 这表示一个"快速"中断处理. 快速处理在当前处理器上禁止中断来执行 (这个主题在"快速和慢速处理"一节涉及).SA_SHIRQ这个位表示中断可以在设备间共享. 共享的概念在"中断共享"一节中略述.SA_SAMPLE_RANDOM这个位表示产生的中断能够有贡献给/dev/random 和 /dev/urandom 使用的加密 池. 这些设备在读取时返回真正的随机数..._linux如何中断安装
数据库系统概论期末复习【超实用】_数据库系统概论第五版期末试题-程序员宅基地
文章浏览阅读3.7w次，点赞410次，收藏2.9k次。所用教材：《数据库系统概论(第5版)》王珊 萨师煊 编著 理论与实践相结合的好书本文大部分写自同学，本作者稍加详解。感谢该同学，这些题目做透能拿高分！一、简答题（来自第一章 绪论 课后题P34）10’1. 试述数据、数据库、数据库管理系统、数据库系统的概念。 数据：描述事物的符号记录。 数据库：长期储存在计算机内、有组织的、可共享的大量数据的集合。..._数据库系统概论第五版期末试题
随便推点
springcloud之admin的搭建使用_spring cloud admin-程序员宅基地
文章浏览阅读1.6k次。微服务的优点是服务模块化，高内聚，低耦合。随着服务数量的增多，服务的监控也变得异常困难。springcloud引入提供了admin组件，人性化UI管理界面可以对所有服务的运行状态进行监控，并提供告警等功能。一.springboot-admin简介显示健康状况显示详细信息，例如JVM和内存指标数据源指标缓存指标关注并下载日志文件查看jvm系统和环境属性查看Spring Boot配置..._spring cloud admin
/etc/fstab 参数详解及如何设置开机自动挂载_fstab defaults-程序员宅基地
文章浏览阅读6.5w次，点赞5次，收藏52次。某些时候当Linux系统下划分了新的分区后，需要将这些分区设置为开机自动挂载，否则，Linux是无法使用新建的分区的。 /etc/fstab 文件负责配置Linux开机时自动挂载的分区。Windows的文件结构是多个并列的树状结构，最顶部的是不同的磁盘（分区），如：C，D，E，F等。Linux的文件结构是单个的树状结构。最顶部的为根目录，即/。在根目录下，分为多个子目录，包括/bi_fstab defaults
LNK1104:Cannot open file 'glut32.lib'_vs2022 错误lnk1104无法打开文件“glut32.lib-程序员宅基地
文章浏览阅读2.8k次。前言：好久没有写CSDN的blog了，刚刚写blog的时候，我还是一个hello world的水平。真可谓“条条大路通CS”，花了一年时间，从EE专业自学到了CS了。也当是小有所成。希望，一起在路上的朋友，我们一起加油！问题背景在使用QT开发window应用程序的时候，需要使用到OpenGL的库来绘制3D地球。问题详细使用QT creator这个IDE，在build项目的时候，报下面的错误LNK1_vs2022 错误lnk1104无法打开文件“glut32.lib
正则基础知识-程序员宅基地
文章浏览阅读4.1k次，点赞4次，收藏18次。正则 RegExp：由相关元字符和修饰符组成的一个规则，匹配 验证和捕获（只用来处理字符串）可以理解为两个斜杠中间包含一些内容就是正则元字符：/元字符/ 两个斜杠之间包起来的内容正则：它就是用来处理字符串的一个规则；●正则匹配：编写一个规则，验证某个字符串是否符合这个规则，正则匹配使用的是test方法●正则捕获：编写一个规则，在一个字符串中把复合规则的内容都获取到 正则捕获使用的方法 正则的exec方法、字符串中的split、replace、match等方法都支持正则正则创建● 字面_正则
H.264 sequence_parameter_sets成员值含义_h.264 sequence parameter set 各个字节的含义-程序员宅基地
文章浏览阅读3.5k次。 SPS: sequence parameter sets它指的是码流对应的profile. 1.1 基线profile(Baseline profile)遵循基线profile的码流应该遵循以下的约束: a) 只有I和P切片存在b) NAL单元流不应该有范围在2到4的nal_unit_type值,包括2和4.c) 序列参数集(sps)的frame_mbs__h.264 sequence parameter set 各个字节的含义
Phase-Based Video Motion Processing论文复现-程序员宅基地
文章浏览阅读462次，点赞5次，收藏12次。精读了一遍，大致了解了要解决的问题、灵感、思路来源、实验设置、结果、结论等。_phase-based video motion processing