video.js视频播放上手

html案例

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>videojs视频播放</title>
</head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>

<body>
  <h3>视频播放</h3>
  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"
    poster="http://vjs.zencdn.net/v/oceans.png">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  </video>
</body>

</html>
<script>
  var player=videojs('example_video_1',{
    muted: true,
    controls: true,
    height: 300,
    width: 400,
    loop: true,
  });
</script>

npm+vue3案例

npm安装依赖

javascript 复制代码
npm install --save-dev video.js

main.js全局配置

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-flash'

const app = createApp(App)
app.provide('videojs', videojs)
app.mount('#app')

应用

javascript 复制代码
<template>
  <video class="video-js" ref="videoPlayer"></video>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { inject } from 'vue'

const videojs = inject('videojs')
const videoPlayer = ref(null)
let player = null

onMounted(() => {
  player = videojs(videoPlayer.value, {
    muted: true,
    controls: true,
    height: 300,
    width: 400,
    loop: true,
  })
  player.src({
    type: 'video/mp4',
    src: 'http://vjs.zencdn.net/v/oceans.mp4'
  })
  player.on('ended', () => {
    console.log('播放结束')
  })
})

onBeforeUnmount(() => {
  if (player) {
    player.dispose()
  }
})
</script>

<style>
/* 你可以在这里添加样式 */
</style>
相关推荐
_张一凡几秒前
OpenAI Sora 2提示词指南:打造精准视频生成指令
aigc·音视频
星秀日2 小时前
JavaWeb--Ajax
前端·javascript·ajax
嫂子的姐夫3 小时前
10-七麦js扣代码
前端·javascript·爬虫·python·node.js·网络爬虫
Komorebi_99993 小时前
Vue3 + TypeScript provide/inject 小白学习笔记
前端·javascript·vue.js
少吃一口都不行3 小时前
脚手架学习
前端·javascript·学习
地方地方3 小时前
手写JavaScript 深拷贝
前端·javascript
明月与玄武4 小时前
浅谈 富文本编辑器
前端·javascript·vue.js
小帅说java4 小时前
【Spring开发】SpringCloud服务端基础框架第9篇:3.Gateway服务网关【附代码文档】
javascript·spring
FuckPatience4 小时前
Vue 与.Net Core WebApi交互时路由初探
前端·javascript·vue.js