html5 video标签播放视频流，MP4格式，webm格式，video元素详解

在这里插入图片描述
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
欢迎大家补充及沟通呀~

html5 video标签播放视频流，MP4格式，webm格式，video元素详解

悦读