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
欢迎大家补充及沟通呀~
智能推荐
java csv 复杂表头_POIUtil（动态复杂表头、动态数据、多线程、合并数据列的POI导出成Excel工具附带生成csv文件）...-程序员宅基地
文章浏览阅读426次。package com.sckj.base.util;import java.io.IOException;import java.lang.reflect.Constructor;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import java.ut..._csv能复杂表头吗
【Python】Python中input的使用_python中input的用法-程序员宅基地
文章浏览阅读1.8w次。input有类似c中的scanf函数。Python2中input使用如下：>>>x = input("x: ")x: 3>>>y = input("y" )y: 4>>> print x*y12但是Python3中input使用会有如下的提示:>>> x=input("x:")x:3>>> y=input("y:")y:5>>> print (x*y)Traceback (mos_python中input的用法
sql server异地备份_sql2008r2 异地备份-程序员宅基地
文章浏览阅读562次。服务器名为：jiliangserver 备份的数据库为：JLSDB declare @strsql varchar(1000) declare @strdirname varchar(50) declare @strcmd varchar(50) dec_sql2008r2 异地备份
postfix报错postfix: fatal: parameter inet_interfaces: no local interface found for ::1_postfix[2649]: fatal: parameter inet_interfaces: n-程序员宅基地
文章浏览阅读4.1k次。From: http://blog.csdn.net/xiangshanqishi/article/details/23439397启动postfix出错，查看centos中的postfix日志more /var/log/maillogpostfix: fatal: parameter inet_interfaces: no local interface found f_postfix[2649]: fatal: parameter inet_interfaces: no local interface found fo
【二维树状数组】POJ 1195_poj1195-程序员宅基地
文章浏览阅读468次。求和的时候注意容斥原理ans = sum(x2,y2)-sum(x1-1,y2)-sum(x2,y1-1)+sum(x1-1,y1-1);#define N 1100int c[N][N];int lowbit(int x){ return x&(-x);}void add(int i,int j,int x){ int tmp; while(i
基于VUE的校园二手物品交易管理系统的设计与实现 （含源码+sql+视频导入教程）_二手商品交易管理系统-程序员宅基地
文章浏览阅读2.2k次，点赞49次，收藏45次。基于VUE的校园二手物品交易管理系统8拥有两种角色管理员：闲置物品管理、订单管理、用户管理用户：登录注册、购物车、发布闲置物品、评论、发货、收货地址管理等_二手商品交易管理系统
随便推点
el-input输入保留两位小数_el-input保留两位小数-程序员宅基地
文章浏览阅读1k次。el-input输入保留两位小数_el-input保留两位小数
MyBatis多条件查询_mybatis if test 多条件-程序员宅基地
文章浏览阅读1.8k次。在MyBatis中进行多条件查询可以使用动态SQL来构建查询语句。_mybatis if test 多条件
Chrome 您的连接不是私密连接 解决办法_chrome您的连接不是私密连接-程序员宅基地
文章浏览阅读1.9w次，点赞8次，收藏25次。您的连接不是私密连接今天打开b站出现不是私密连接被拦截的情况，试了网上好多种方法都没有效果，最后刷新DNS给解决了，特此记录一下先附上错误截图攻击者可能会试图从 x.x.x.x 窃取您的信息（例如：密码、通讯内容或信用卡信息）。了解详情NET::ERR_CERT_INVALID将您访问的部分网页的网址、有限的系统信息以及部分网页内容发送给 Google，以帮助我们提升 Chrome 的安全性。隐私权政策x.x.x.x 通常会使用加密技术来保护您的信息。Google Chrome 此次尝试连接到_chrome您的连接不是私密连接
让Jenkins帮你自动布署Vue项目-程序员宅基地
文章浏览阅读177次。作者:zhou_webhttps://segmentfault.com/a/1190000019212628实现目标本地push代码到GitHub，Webhook自动触发jenkins..._jenkins配置generic webhook trigger 自动部署vue项目
WEB服务器端技术_简单、持续的客户端状态来 基于 web 的客户端 务器 用。服务器在向客户端 由-程序员宅基地
文章浏览阅读1w次，点赞4次，收藏23次。WEB服务器端技术客户端是与用户交互的唯一接口，对于软件测试人员来说不可掉以轻心，那么服务器端又需要我们了解哪些技术呢？事实上，对于Web系统来说，相比于客户端技术，服务器端技术更是深不可测，其各类技术，系统架构，处理方式等千变万化。服务器端的技术进步，同样要求软件测试技术的同步前进，也更加要求软件测试人员能够跟上技术的步伐，否则测试将很难开展。虽然服务器端技术很复杂，作为测试人员，我们不能望而却步，否则我们的测试如何进步？本节就来为大家作一个整体的梳理，将服务器端的各类技术作一个总结：WW_简单、持续的客户端状态来 基于 web 的客户端 务器 用。服务器在向客户端 由
google地图api之简单轨迹（四）_谷歌地图轨迹api例子-程序员宅基地
文章浏览阅读2.4k次。<!DOCTYPE html><html><head runat="server"> <title>google地图轨迹</title> <style type="text/css"> #map_canvas { width: auto; ..._谷歌地图轨迹api例子