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>
相关推荐
元亓亓亓26 分钟前
考研408--组成原理--day1
开发语言·javascript·考研·计组
Mintopia1 小时前
🌌 知识图谱与 AIGC 融合:
前端·javascript·aigc
秋子aria1 小时前
作用域详解 立即执行函数详解
javascript
fox_1 小时前
写多参数函数总重复传值?用柯里化3步搞定参数复用与延迟执行
javascript
我叫黑大帅1 小时前
面对组件的不听话,我还是用了它…………
前端·javascript·vue.js
尔嵘1 小时前
vue2+elementUi实现自定义表格框选复制粘贴
前端·javascript·elementui
chéng ௹1 小时前
Vue3+Ts+Element Plus 权限菜单控制节点
前端·javascript·vue.js·typescript
携欢2 小时前
PortSwigger靶场之Exploiting server-side parameter pollution in a REST URL通关秘籍
前端·javascript·安全
P P PHP2 小时前
Html播放m3u8视频
音视频
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS+js早餐铺网页设计(4页)附源码
javascript·css·html