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='options.type' /></video></div>
</template><script>import videojs from 'video.js'import 'video.js/dist/video-js.css'import 'vue-video-player/src/custom-theme.css'import 'videojs-flash'data() {return {name: 'video.js', //video.js实现视频播放player: null, //视频},
},
methods: {
initVideo(options) {console.log("=======initVideo=========")this.player = videojs('my-player1'); //my-player为页面video元素的idthis.player.src([{type: options.type,src: options.url,}])
},
mounted() {this.initVideo(this.options);console.log("finsh videoPlayer mounted()")},
}
</script>
<style lang='less' scoped>.videoDiv,{background-color: gray;display: flex;width: 100%;height: auto;}.page-video{width: 100%;height: auto;}</style>

自用链接：

demo视频：
url: 'https://vjs.zencdn.net/v/oceans.mp4',
type: 'video/mp4',湖南台：
url: 'rtmp://58.200.131.2:1935/livetv/hunantv',
type: 'rtmp/flv',m3u8格式的视频：					
url: 'http://127.0.0.1:8080/getm3u8',
type: 'application/x-mpegURL',网上的音乐链接：
url: 'http://music.163.com/song/media/outer/url?id=470573994.mp3',
type: 'audio/mpeg ',

注意：

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);},

这里我使用了双向绑定数据。任何一条语句。缺一不可
说明：
1.nowOptions是父亲的属性，我利用组件把他传进子组件，然后子组件的通过prop接收options，options指的就是这个nowOptions

				<videoPlayer ref="videoPlayer" id="my-player" :options='nowOptions' ></videoPlayer>

2.我的initVideo(e)方法中this.player = videojs('my-player1');是引用video标签的videojs本体，所以定义属性在上面定义就可以了，比如

<video id="my-player1"  controls preload="auto">

3.在this.player = videojs('my-player1',{controls:true});和在写属性的方法不同，需要注意

2.实现切换网站

把第一个代码改成3个按钮就可以了，我使用的是往组件传入绑定的option，所以一传进去再引用player的src就可以了，网上有说用source，我没有测试，注意一点是load()方法我也没有使用，网上也说要用

					<button id = "button" value="hangge.mp4" @click = "test">第一集</button><button id = "button" value="hangge.mp4" @click = "test1">第二集</button><button id = "button" value="hangge.mp4" @click = "test2">第3集</button>test(){		console.log("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);},test1(){console.log("test1")this.nowOptions.url= 'http://music.163.com/song/media/outer/url?id=470573994.mp3'this.nowOptions.type= 'audio/mpeg 'this.$refs.videoPlayer.initVideo(this.nowOptions);},test2(){console.log("test2")this.nowOptions.url= 'http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4'this.nowOptions.type= 'video/mp4'this.$refs.videoPlayer.initVideo(this.nowOptions);},

3.跳坑

1. 坑1：import 'vue-video-player/src/custom-theme.css’引入失败
解决方法：
在packjson引入包（忘了是哪个）
“videojs-flash”: “^2.2.1”,
“vue-video-player”: “^5.0.2”,
2. 坑2：创建player对象和获取player对象的方法
this.player = videojs(‘my-player1’);//这个是创建和获取的方法
this.player = videojs(‘my-player1’,{});//这个是创建的方法
有时你重新init的时候，会用到第二种方法，他就会提示你"my-player1"已经创建了，所以尽量把创建和更新分开，或者干脆像我一样，什么都不写
3. 坑3：创建id为my-player会有bug，可能是class文件造成的
原因未知，我把my-player1改成my-player就会报错，不能执行
3. 坑4：videoJs的父亲div的width一定要100%，高度auto
我测试了半天，视频显示不全，原来是在子组件videoDiv中的高度问题

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！