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>
相关推荐
某公司摸鱼前端22 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~23 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
melonbo3 小时前
使用FFmpeg将H.264码流封装为MP4
ffmpeg·音视频·h.264
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim3 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心3 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络3 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
aqi004 小时前
FFmpeg开发笔记(七十七)Android的开源音视频剪辑框架RxFFmpeg
android·ffmpeg·音视频·流媒体
失落的多巴胺5 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5