vue引入video视频播放器（视频调用代码范例）

阿酷tony

已于 2022-08-23 16:37:17 修改

阅读量2.6k

点赞数

分类专栏：酷播云（免费云存储）网页视频播放器播放器开发专栏文章标签： vue.js javascript

于 2022-08-23 16:36:52 首次发布

本文链接：https://blog.csdn.net/ffffffff8/article/details/126486477

版权

酷播云（免费云存储）同时被 3 个专栏收录

50 篇文章 2 订阅

订阅专栏

网页视频播放器

49 篇文章 1 订阅

订阅专栏

播放器开发专栏

30 篇文章 5 订阅

订阅专栏

vue引入video视频播放器（视频调用代码范例）

VUE视频调用代码范例1：

<template>
	<div>
	    <div id="player"></div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
			    vodPlayerJs: 'https://player.polyv.net/script/player.js',
      			vid: '8588843127d9b9388660dbda2acbe59b_8' // 视频VID
			}
		},
		mounted() {
		    this.loadPlayerScript(this.loadPlayer)
		},
		destroyed() {
		    if (this.player) {
		      this.player.destroy()
		    }
		},
		methods:{
			loadPlayerScript(callback) {
		      if (!window.polyvPlayer) {
		        const myScript = document.createElement('script')
		        myScript.setAttribute('src', this.vodPlayerJs)
		        myScript.onload = callback
		        document.body.appendChild(myScript)
		      } else {
		        callback()
		      }
		    },
		    // 播放器的实例，以及配置
		    loadPlayer() {
		      const polyvPlayer = window.polyvPlayer
		      this.player = polyvPlayer({
		        wrap: '#player',
		        width: 800,
		        height: 533,
		        vid: this.vid
		      })
		    }
		}
	}
</script>

VUE视频调用代码范例2：

<div class="palyBtn"  @click="changePlay">
        <img src="testtest.png" alt="" />
      </div>

      <div class="test_two_box" v-show="!showMes">
        <video
          id="myVideo"
          class="video-js"
          autoplay
          controls
        >
          <source
            src="@assets/project.mp4"
            type="video/mp4"
          >
        </video>
      </div>

<template>
<div class="test_two_box">
<video
id="myVideo"
class="video-js"
>
<source
src="//vjs.zencdn.net/v/oceans.mp4"
type="video/mp4"
>
</video>
</div>
</template>

<script>
/* eslint-disable */
export default {
name: "TestTwo",
data() {
return {};
},
mounted() {
this.initVideo();
},
methods: {
initVideo() {
//初始化视频方法
// eslint-disable-next-line no-undef
let myPlayer = this.$video(myVideo, {// eslint-disable-line no-unused-vars
//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
controls: true,
//自动播放属性,muted:静音播放
autoplay: "muted",
//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
preload: "auto",
//设置视频播放器的显示宽度（以像素为单位）
width: "800px",
//设置视频播放器的显示高度（以像素为单位）
height: "400px"
});
}
}
};
</script>

<style scoped>
</style>

引入video视频播放器，希望能给大家一个参考，也希望大家多多支持。

vue引入video视频播放器（视频调用代码范例）

VUE视频调用代码范例1：

<template>
	<div>
	    <div id="player"></div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
			    vodPlayerJs: 'https://player.polyv.net/script/player.js',
      			vid: '8588843127d9b9388660dbda2acbe59b_8' // 视频VID
			}
		},
		mounted() {
		    this.loadPlayerScript(this.loadPlayer)
		},
		destroyed() {
		    if (this.player) {
		      this.player.destroy()
		    }
		},
		methods:{
			loadPlayerScript(callback) {
		      if (!window.polyvPlayer) {
		        const myScript = document.createElement('script')
		        myScript.setAttribute('src', this.vodPlayerJs)
		        myScript.onload = callback
		        document.body.appendChild(myScript)
		      } else {
		        callback()
		      }
		    },
		    // 播放器的实例，以及配置
		    loadPlayer() {
		      const polyvPlayer = window.polyvPlayer
		      this.player = polyvPlayer({
		        wrap: '#player',
		        width: 800,
		        height: 533,
		        vid: this.vid
		      })
		    }
		}
	}
</script>

VUE视频调用代码范例2：

<div class="palyBtn"  @click="changePlay">
        <img src="testtest.png" alt="" />
      </div>

      <div class="test_two_box" v-show="!showMes">
        <video
          id="myVideo"
          class="video-js"
          autoplay
          controls
        >
          <source
            src="@assets/project.mp4"
            type="video/mp4"
          >
        </video>
      </div>

<template>
<div class="test_two_box">
<video
id="myVideo"
class="video-js"
>
<source
src="//vjs.zencdn.net/v/oceans.mp4"
type="video/mp4"
>
</video>
</div>
</template>

<script>
/* eslint-disable */
export default {
name: "TestTwo",
data() {
return {};
},
mounted() {
this.initVideo();
},
methods: {
initVideo() {
//初始化视频方法
// eslint-disable-next-line no-undef
let myPlayer = this.$video(myVideo, {// eslint-disable-line no-unused-vars
//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
controls: true,
//自动播放属性,muted:静音播放
autoplay: "muted",
//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
preload: "auto",
//设置视频播放器的显示宽度（以像素为单位）
width: "800px",
//设置视频播放器的显示高度（以像素为单位）
height: "400px"
});
}
}
};
</script>

<style scoped>
</style>