videoJs使用说明

最新推荐文章于 2024-08-20 22:59:20 发布

tututyl

最新推荐文章于 2024-08-20 22:59:20 发布

阅读量1.1k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42837167/article/details/109675094

版权

本文档详细介绍了VideoJS的入门步骤，包括创建方法、切换视频源的实现以及在Vue.js环境中可能遇到的坑与解决方案。重点讲解了如何通过this.$refs初始化视频播放器，传递选项，并解决样式引入、player对象创建与更新、ID命名问题以及播放区域尺寸设置等常见问题。

摘要由CSDN通过智能技术生成

VideoJS入门说明

新手入门请看，里面包含了最基本的js文件和vue入门方法，官方还有demo展示
videojs官网：VideoJS官网

1.创建方法如下：

可以在父组件引用this.$refs.videoPlayer.initVideo(this.nowOptions);

//父组件下的
<button@click = "test">第一集</button>

test(){
   		
	this.nowOptions.url= 'https://vjs.zencdn.net/v/oceans.mp4'
	this.nowOptions.type= 'video/mp4'
	this.nowOptions.poster= '//vjs.zencdn.net/v/oceans.png'
	this.$refs.videoPlayer.initVideo(this.nowOptions);
},
//父组件的data（）属性
nowOptions: {
    
	poster: '//vjs.zencdn.net/v/oceans.png',
	url: 'https://vjs.zencdn.net/v/oceans.mp4',
	type: 'video/mp4',
}

//子组件下的
<template>
<div class="videoDiv">
		<!-- vjs-default-skin     -->
		<video id="my-playe1r" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9 page-video">
			<!--   controls -->
			<source :src='options.url' :type