videojs的初步使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：videojs的初步使用：

h5使用vue框架播放m3u8、flv视频。

---

一、videojs官方文档地址

学习 videojs官方文档，使用更便捷。

二、使用步骤

1.引入库

代码如下（示例）：

npm install --save-dev video.js

package.json

{
	"dependencies": {
		"video.js": "^7.10.2"
	}
}



## 2.读入数据
代码如下（示例）：
```c
data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

2.引入项目

安装成功后，在main.js文件下引入对应的css样式，并进行全局组件注册或者单页面注册

main.js中

import videojs from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.$video = videojs;

或者 main.js

import 'video.js/dist/video-js.css';

单页面中直接引入

<template>
</template>
<script>
import videojs from 'video.js';
export default {

}
</script>
<style lang="scss" scoped>
</style>

3.单页面使用

vue

<div class="video-js vjs-big-play-centered" ref="videos" style="width: 100%;height: 100%;"></div>

js

import videojs from 'video.js';
export default {
	data() {
		return {
			videoInfo: {},
			player: null,
			flvPlayer: null
		};
	},
	mounted() {
			this.videojsInit();
	},
	onLoad(e) {
	},
	destroyed() {
		this.mp.destroy();
	},
	methods: {
		
		videojsInit(){
		let video = document.createElement('video');
					video.id = 'video';
					video.style = 'width: 100%; height: 100%;';
					video.controls = true;
					video.preload = "auto"
					video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
					video.setAttribute('webkit-playsinline', true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放，也就是不是全zhi屏播放的video标签的一个属性
					video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
					let source = document.createElement('source');
					source.src = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'; //这是测试地址 更换成自己的地址即可
					video.appendChild(source);
					this.$refs.videos.appendChild(video);
					let that = this;
					let player = videojs('video', {
						poster: '', // 视频封面图地址
						title: '4564564',
						playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
						autoDisable: true,
						preload: 'none', //auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频
						language: 'zh-CN',
						fluid: true, // 自适应宽高
						muted: false, //  是否静音
						aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
						controls: true, //是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
						autoplay: false, //如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放
						loop: true, // 导致视频一结束就重新开始。 视频播放结束后，是否循环播放
						screenshot: true,
						controlBar: {
							volumePanel: { //声音样式
								inline: false // 不使用水平方式
							},
							timeDivider: true, // 时间分割线
							durationDisplay: true, // 总时间
							progressControl: true, // 进度条
							remainingTimeDisplay: true, //当前以播放时间
							fullscreenToggle: true, //全屏按钮
							pictureInPictureToggle: true, //画中画
						}
					}, function() {
						this.on('error', function(err) { //请求数据时遇到错误
							console.log("请求数据时遇到错误", err)
						});
						this.on('stalled', function(stalled) { //网速失速
							console.log("网速失速", stalled)
						});
						 this.on('play', function() { //开始播放
							console.log("开始播放")
						});
						 this.on('pause', function() { //暂停
							console.log("暂停")
						 });
						 this.on('timeupdate', function(timeupdate) {
							 console.log(timeupdate)
						 })
					});
		},
		
	}
};

---

提示：VideoJS居中播放按钮： 只需将vjs-big-play-centered类添加到视频元素中

<video id="my_video" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="360"... ></video>

总结

结束~
撒花~
途中遇到的坑！
1.没有全局引入样式 在单页面引入一直报错，需要在main.js中引入才可以生效
2.使用测试地址进行播放，避免后端给的视频地址有问题 卡住进度