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
欢迎大家补充及沟通呀~
智能推荐
使用IPSET屏蔽美国IP_ipset封禁国外ip-程序员宅基地
文章浏览阅读387次，点赞6次，收藏8次。最近被美国IP盯上了，瞄的不间断攻击ADD-TO-CART页面。记录下用IPSET屏蔽过程。执行如下脚本，将IP地址段中的记录转换为Ipset指令，保存在。_ipset封禁国外ip
nodejs的字符串操作模块_nodejs 字符串操作模块-程序员宅基地
文章浏览阅读3.2w次。nodejs字符串操作简介需要引入querystring对象，querystring对象的方法有stringifyquerystring.stringify(“对象”，“分隔符”，“分配符”)，将一个json对象，转为字符串，通过指定的分隔符，以及分配符 具体代码：var querystring = require('querystring');var result = querystring.s_nodejs 字符串操作模块
李宏毅机器学习笔记第1周-机器学习基本概念_anomaly compression-程序员宅基地
文章浏览阅读855次。机器学习基本概念_anomaly compression
MD5碰撞-程序员宅基地
文章浏览阅读9.4k次，点赞29次，收藏109次。在CTF中可以说是经常碰到md5加密了，一般都是进行强比较抑或是弱比较，考法非常多，但是万变不离其中。只要我们掌握了原理，一切问题便迎刃而解了。文章首发于我的博客，格式可能比较清晰，有兴趣了解CTF中MD5碰撞的伙伴可以移步查看。_md5碰撞
普里姆算法c语言(详细解读）_c语言普里姆算法-程序员宅基地
文章浏览阅读854次，点赞5次，收藏12次。找到与这个系统邻接的边（0，1），（5，4），比较两者的权值，容易发现权值最小的为25，因此加入边（5，4），同时加入结点4和边（5，4）。4.将0，5，4，3以及相关的边看成一个整体，与其邻接的边有（0，1）28，（4，6）24，（3，6）18，（3，2）12，四个边中权值最小的边是（3，2），所以加入结点2以及边（3，2）。5.与4中所构成的整体邻接的边有（0，1）28，（4，6）24，（3，6）18，（2，1）16，四者中权值最小的边为（2，1），所以加入结点1以及边（2，1）。_c语言普里姆算法
nohub 和 & 在linux上不间断后台运行程序-程序员宅基地
文章浏览阅读3.1k次，点赞2次，收藏15次。长时间在服务器上运行深度学习代码，使用nohub 命令行 & 可以让代码不间断在后台运行_nohub
随便推点
docker配置国内镜像源_docker国内镜像源-程序员宅基地
文章浏览阅读3.3w次，点赞9次，收藏25次。刚开始学习docker，发现下载镜像非常的慢。如果不经过，docker的镜像下载都来源于国外，因此需要配置国内的镜像源。Docker中国区官方镜像。_docker国内镜像源
Unity中怎么播放视频_unity 播放视频-程序员宅基地
文章浏览阅读1.9w次，点赞40次，收藏209次。一.首先在场景中新建UI中的Raw Image可以按住Alt再点击下图红色箭头所示将Raw Image铺满游戏全屏(也可以自己调整大小)二.给Raw Image添加Video Player组件三.在Assets或者自己想要的文件夹中创建Render Texture四.将准备好的视频(这里用到的视频格式是mp4)拖入项目中并做如下修改这里我把新建的Render Texture命名为2，拖入的视频也命名为2(随便命的，不要在意)这里我们看到这个Render Te..._unity 播放视频
使用BOOTICE 恢复系统启动项_bootice保存后没用-程序员宅基地
文章浏览阅读9.7k次，点赞2次，收藏9次。使用BOOTICE 恢复系统启动项我在安装deepin 系统的时候，经常遇到重启进不去系统，每次重启都会进入windows 系统，这让我感到特别头疼，试了好多次都不成功，有些情况是，成功后再次重启又回到了windows系统。后来终于在PE中利用一款叫做BOOT ICE的工具成功解决。BOOTICE— 引导扇区维护工具简介BOOTICE 是一个启动相关的维护的小工具，主要用于安装、修复、备份和恢复磁盘_bootice保存后没用
文本分类与SVM_svm分类-程序员宅基地
文章浏览阅读9.5w次，点赞54次，收藏202次。之前做过一些文本挖掘的项目，比如网页分类、微博情感分析、用户评论挖掘，也曾经将libsvm进行包装，写了一个文本分类的开软软件Tmsvm。所以这里将之前做过一些关于文本分类的东西整理总结一下。1 基础知识1. 1 样本整理文本分类属于有监督的学习，所以需要整理样本。根据业务需求，确定样本标签与数目，其中样本标签多为整数。在svm中其中如果为二分类，样本标签一般会设定为-1和_svm分类
力扣——206.反转链表_力扣链表反转-程序员宅基地
文章浏览阅读141次。题目python代码方法一：利用新列表，创建新的链表# Definition for singly-linked list.# class ListNode(object):# def __init__(self, val=0, next=None):# self.val = val# self.next = nextclass Solution(object): def reverseList(self, head): ""_力扣链表反转
如何解决深度冲突（Z-fighting），画面闪烁的问题-程序员宅基地
文章浏览阅读3.6k次，点赞3次，收藏6次。参考：OpenGL教程：深度测试深度冲突一个很常见的视觉错误会在两个平面或者三角形非常紧密地平行排列在一起时会发生，深度缓冲没有足够的精度来决定两个形状哪个在前面。结果就是这两个形状不断地在切换前后顺序，这会导致很奇怪的花纹。这个现象叫做深度冲突(Z-fighting)，因为它看起来像是这两个形状在争夺(Fight)谁该处于顶端。防止深度冲突第一个也是最重要的技巧是永远不要把多个物体摆得太靠近，以至于它们的一些三角形会重叠。通过在两个物体之间设置一个用户无法注意到的偏移值，你可以完全避免这两个物体之_深度冲突