原理：基于原生video標簽進行擴展，使用的前端框架為vue2.x。

主要功能：視頻地址切換，清晰度切換，斷點續播，播放記錄統計。

方法一（直接使用video）：

html部分：

<videoid="videoPlayer"ref="videoPlayer"controlspreload="load"autoplay:src="currentSrc"class="video-js"></video>

綁定的currentSrc為視頻播放地址，從后臺獲取不同清晰度的視頻播放url，當點擊切換清晰度時，對src屬性進行動態切換即可賦值。

進行斷點記錄和續播:

? ? 1.當點擊切換視頻時，通過this.player.currentTime讀取當前播放進度。

? ? 2.為video新增播放監聽事件，監聽到canplaythrough（可以播放事件），再對currentTime賦值即可跳到記錄的位置。

mounted(){this.player.addEventListener('canplaythrough', this.addListener)}/*** 監聽播放事件*/addListener () {console.log('可以播放了')let timer = setInterval(() => {this.player.currentTime = this.processif (this.player.currentTime === this.process) {clearInterval(timer)}}, 500)}

播放記錄統計:

? ? 1.當監聽到視頻播放時，播放次數+1即可（需要注意的是，切換清晰度時，不應該再把瀏覽次數統計進去了）

this.player.addEventListener('play', () => {if (this.scanFlag) {console.log('瀏覽記錄++++++++++1')this.scanFlag = false}})

方法二（使用第三方庫實現，推薦）：

西瓜播放器：https://v2.h5player.bytedance.com/api/#%E5%B1%9E%E6%80%A7

安裝：

npm ?install video.js

引入：

import vedioPlayer from 'xgplayer' import 'video.js/dist/video-js.css'

使用：

<template><div><div id="videoPlayer"></div></div> </template> // 初始化播放器 this.player = new vedioPlayer({id: 'videoPlayer',autoplay: true,volume: 0.3,loop: true,url: '',// poster: '' ,//視頻封面playsinline: true,height: '100%',width: '100%',})// 設置清晰度 this.player.emit('resourceReady', [{name: '高清', url: 'xxxxx'},{name: '流暢', url: 'xxxxx'},{name: '原畫', url: 'xxxxx'} ])

總結

以上是生活随笔為你收集整理的web端实现视频播放，视频地址切换，清晰度切换，断点续播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。