本文主要是介绍在vue中如何实现点播功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
H5提供给我们 <video> 标签
用他可以实现一个简单的h5视频
<video src="xxx.mp4" controls="controls"></video>
但是：
他仅在 Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。
注意：Internet Explorer 8 以及更早的版本不支持 <video> 标签。
这里我要说的是使用video.js实现视频播放功能
有人说video.js版本太高不能使用，不能使用7以上的版本，用5版本的，我最后测试，根本不需要什么低版本的高版本的，7版本以上的没有任何问题。
那么如何使用呢？
一、安装 npm i video.js -S
二、在main.js中引入
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
三、在组件中使用
<template><div><videoid="sslcsq"><sourcesrc="https://img.tukuppt.com/video_show/130518/00/02/37/5b5985d44e9a9_10s_big.mp4"type="video/mp4"></video></div>
</template><script>
export default {data () {return {}},mounted () {this.actions()},methods: {actions () {// 初始化视频方法// eslint-disable-next-line no-undefthis.$video(sslcsq, {// 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。controls: true,// 自动播放属性,muted:静音播放// autoplay: 'muted',// 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。preload: 'auto',// 设置视频播放器的显示宽度（以像素为单位）width: '800px',// 设置视频播放器的显示高度（以像素为单位）height: '400px'})}}
}
</script><style lang="scss" scoped></style>
这里样式没有去写 主要实现点播功能
具体功能实现请看官网：https://videojs.com/
这篇关于在vue中如何实现点播功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
