vue video 와 vue-video-player 는 영상 을 가득 채 우 는 튜 토리 얼 을 실현 합 니 다.
15509 단어 vuevideovue-video-player
Video.js
수요:간단 한 영상 재생 수요 에 있어 video.js 는 충분히 감당 할 수 있 습 니 다.
HTML 5 와 Flash 를 지원 하 는 비디오 플레이어 입 니 다.
1:video.js 설치
npm install -s video.js
2:main.js 파일 에 관련 파일 도입
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
<template>
<div class="video_text">
<video
id="myVideo"
class="video-js"
>
<source
:src="videoUrl"
type="video/mp4"
>
</video>
</div>
</template>
<script>
export default {
name: "Video",
data() {
return {
videoUrl:'...',//
};
},
mounted() {
this.initVideo(); //
},
methods: {
initVideo() {
//
let myPlayer = this.$video(myVideo, {
//
controls: true,
// ,muted:
autoplay: false,
//
muted:false,
//
fluid:true,
// （ ）
width: "800px",
// （ ）
height: "400px"
});
}
}
};
</script>
<style lang="less">
.video_text{
width: 70%;
margin: 0 auto;
}
video:focus{
outline: 0; //
}
.video-js .vjs-big-play-button{
/* */
width: 100px;
height: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
</style>
5:video.js 를 첨부 하 는 기본 적 인 방법
myPlayer.ready(function(){
// ，this ， （myPlayer ）
myPlayer.play(); //
myPlayer.pause(); //
var currentTime = myPlayer.currentTime(); //
myPlayer.currentTime(120); //
var duration = myPlayer.duration(); // ， ： flash ！
var buffered = myPlayer.buffered(); // ，
var bufferedPercent = myPlayer.bufferedPercent(); // ，
var volume = myPlayer.volume(); // ， 0-1
myPlayer.volume(0.2); //
var width = myPlayer.width(); //
myPlayer.width(640); //
var howTallIsIt = myPlayer.height(); //
myPlayer.height(200); //
myPlayer.size(640,480); //
myPlayer.enterFullScreen(); //
myPlayer.enterFullScreen(); //
})
//
myPlayer.on("ended", function(){
console.log("end", this.currentTime());
});
//
myPlayer.on("pause", function(){
console.log("pause")
});
//
myPlayer.removeEvent(“eventName”, function(){
console.log("delete")
});1:vue-video-player 다운로드
npm install -s vue-video-player
2:main.js 에 관련 파일 도입
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
// hls, (m3u8)
import 'videojs-contrib-hls'
// rtmp
import 'videojs-flash'
// ， css
require('./assets/css/video_css/myvideo.css')
Vue.use(VideoPlayer)
<template>
<div class="my_video">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="videoPlayerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)"
@ready="playerReadied"
></video-player>
</div>
</template>
<script>
//
import {videoPlayer} from 'vue-video-player'
export default {
name: 'VideoPlayer',
components: {
videoPlayer
},
data () {
return {
video:'', //
fileType: 'mp4', //
videoUrl: '', //
posterUrl:'' //
}
},
mounted(){
},
methods:{
//
onPlayerPlay(player) {
//console.log('player play!', player)
},
//
onPlayerPause(player) {
//console.log('player pause!', player)
},
//
onPlayerEnded($event) {
this.$refs.videoPlayer.player.src(this.fileUrl)
},
// DOM readyState
onPlayerWaiting($event) {
//console.log(player)
},
//
onPlayerPlaying($event) {
// console.log(player)
},
//
onPlayerLoadeddata($event) {
// console.log(player)
},
// 。
onPlayerTimeupdate($event) {
//console.log(player)
},
// readyState HAVE_FUTURE_DATA
onPlayerCanplay(player) {
// console.log('player Canplay!', player)
},
// readyState HAVE_ENOUGH_DATA 。 。
onPlayerCanplaythrough(player) {
// console.log('player Canplaythrough!', player)
},
//
playerStateChanged(playerCurrentState) {
//console.log('player current update state', playerCurrentState)
},
// 。 ， ready ， 。。
playerReadied(player) {
//console.log('example player 1 readied', player);
},
},
computed: {
videoPlayerOptions () {
const videoPlayerOptions = {
playbackRates: [0.75, 1.0, 1.25, 1.5,2.0], //
autoplay: false, // 。
muted: false, // ， 。
loop: false, // 。
preload: 'auto', // <video> 。auto , （ ）
language: 'zh-CN',
aspectRatio: '3:1', // ， 。 - （ "16:9" "4:3"）
fluid: true, // 。
flash:{hls:{withCreadentials:false}},// rtmp
html5:{hls:{withCreadentials:false}},// m3u8
sources: [{
type: 'video/' + this.fileType,
src: this.videoUrl // url
}],
poster: this.posterUrl, //
width: '100%',
notSupportedMessage: ' ...', // Video.js， 。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true
}
}
return videoPlayerOptions
}
},
}
</script>
<style scoped lang="less">
.my_video{
width: 100%;
height: calc(100vh - 100px);
background-color: white;
}
.video-js .vjs-big-play-button{
/* */
width: 100%;
height: 100%;
border-radius: 50%;
}
</style>
일부 개선 사항:
1:동 영상 양쪽 여백 을 없 애 는 것,즉 동 영상 에 부모 요 소 를 가득 채 우 는 것 을 실현 하 는 것 이다.
스타일 object-fit:fill 추가 하기;영상 을 꽉 채 우 도록 하 겠 습 니 다.
video{
width: 100% !important;
height: calc(100vh - 95px) !important;
object-fit:fill; //
}
object-fit 추출 지식 보충:
fill:이 값 은 boject-fit 의 기본 값 입 니 다.내용 을 바 꾸 는 크기 는 요 소 를 채 우 는 내용 상자 로 설정 되 어 있 습 니 다.즉,요소 의 내용 은 용기 의 외형 사 이 즈 를 완전히 채 우 는 것 으로 확대 되 었 습 니 다.이것 이 내 재 된 너비 와 높이 를 깨 더 라 도.
include:요소 내용 의 크기 를 바 꾸 고 길 고 넓 은 비례 로 요소 내용 용 기 를 채 웁 니 다.구체 적 인 대상 의 크기 는 요 소 를 포함 하 는 너비 와 높이 로 분 석 됩 니 다.즉,원 소 를 교체 하 는 데 명확 한 높이 와 폭 을 설정 하면 이 값 은 내용 의 크기 를 가 져 오고 고정된 비율 로 표시 되 지만 요소 크기 에 표 시 됩 니 다.
cover:대체 요소 의 내용 크기 는 길이 와 너비 비례 로 요소 내용 용 기 를 채 웁 니 다.구체 적 인 대상 크기 는 전체 요 소 를 덮 는 너비 와 높이 로 분 석 됩 니 다.즉,대체 요소 의 내용 크기 는 길이 와 폭 비 를 유지 하지만 내용 요 소 를 완전히 덮어 쓸 수 있 도록 너비 와 높이 를 바 꾸 는 것 이다.
none:요소 내용 을 바 꾸 고 크기 를 조정 하지 않 으 며 내부 요소 에 적응 하 는 용기 입 니 다.내용 은 요소 에 설 치 된 모든 높이 와 가중치 를 무시 하고 요소 크기 에 표 시 됩 니 다.scale-down:내용 크기 가 none 또는 contact 를 설정 하면 구체 적 인 대상 이 작 아 집 니 다.
2:자가 적응 폭 실현
위 에 설 치 된 fluid:true 를 통 해 넓 은 높이 에 적응 할 수 있 지만 가끔 은 동 영상 총 높이 를 규정 하 는 수요 가 있 습 니 다.fluid 만 으로 는 적응 이 부족 합 니 다.
나의 필요 효과 도:
pc 단자:
이동 단:
내 가 만난 문제:
비디오 영상의 높이 와 폭 을 100%설정 한 후에 전체 높이 는 그 위치의 높이 를 초과 하여 많은 방법 을 시 도 했 지만 안 되 었 다.나중에 야 간단 하고 거 친 방법 으로 C 가 css 스타일 을 수정 하 는 것 을 해결 했다.(도움 이 될 것 같 으 면 다시 쓰 세 요 여러분)
메모:비디오 플레이어 옵션 에 설 치 된 fluid:true 와 aspectRatio:'16:10'을 제거 하고 css 스타일 을 바 꾸 었 습 니 다.
html 코드:
<div class="my_video">
<video-player class="video-player vjs-custom-skin"
id="videoDiv"
ref="videoPlayer"
:playsinline="true"
:webkit-playsinline="true"
:options="videoPlayerOptions"
></video-player>
</div>@media screen and(min-width:768 px){/pc 엔 드 동 영상 이 가득 깔 려 있 고 전체 용기 의 높이 를 차지 하 며 이동 단 은 동 영상 이 전체 높이 를 차지 할 필요 가 없습니다.동 영상 이 길 어 지기 때문에 보기 싫 습 니 다.
video{
width: 100% !important;
height: calc(100vh - 95px) !important; // 100vh-95px，
object-fit:fill; //
}
}
// my_video ， video div （ div），
#videoDiv>div{
height: calc(100vh - 95px) !important;
overflow: hidden;
}
.my_video{ //
width: 100%;
height: calc(100vh - 95px);
background-color: white;
}video.js 플러그 인 은 vue 에서 vue-video-player 입 니 다.
우 리 는 vue 에서 영상 을 재생 할 때 이 플러그 인 을 사용 할 수 있 습 니 다.
다음은 몇 가지 사용 중의 문 제 를 간단하게 설명 하고 다른 문제 와 관련 되 지 않 습 니 다.
1.사용자 정의 재생 처리,우리 스스로 재생 이 벤트 를 실행 하 는 방법
2.재생,트리거 함수 에 대한 처 리 를 중단 합 니 다.
3.안 드 로 이 드 의 위 챗 에서 영상 을 재생 할 때 재생 할 수 없 는 문제;
1.사용자 정의 재생,지금 자신 이 button 을 썼 거나 다른 무언 가 를 동 영상 위 에 올 려 놓 았 다 고 가정 하고 이 게임 을 클릭 하여 동 영상 을 재생 하 라 고 요구 합 니 다.
재생 버튼 으로 도 이해 할 수 있 습 니 다.그러면 먼저 반드시 사건 을 연결 해 야 합 니 다.vue 바 인 딩 사건 은 말 하지 않 겠 습 니 다.다 할 수 있 을 것 입 니 다.그러면 이 바 인 딩 에 있 습 니 다.
이벤트 함수 에서 우 리 는 어떻게 동 영상 을 재생 합 니까?:this.$refs.videoPlayer.player.play(); 됐어 요.
2.재생 또는 재생 을 중단 할 때 추가 처 리 를 어떻게 하고 싶 습 니까?그러면
다음 코드 는 해당 함수 에서 처리 하면 되 고 다른 사건 도 비슷 하 게 처리 할 수 있 습 니 다.
3.
따라서 상황 에 따라 처리 해 야 합 니 다.이곳 의 상황 은 보통 위 챗 브 라 우 저의 x5 커 널 입 니 다.false 로 설정 하고 다른 설정 은 true 로 설정 하면 됩 니 다.
만약 에 위 챗 의 x5 가 true 로 설정 되면 안 드 로 이 드 에서 위 챗 환경 에서 재생 할 수 없고 문제 가 있 습 니 다.
아래 코드 는 일부 코드 입 니 다.설정 만 참고 하 십시오.
<template>
<div class="video">
<video-player class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="playsinline"
customEventName="customstatechangedeventname"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
>
</video-player>
</div>
</template>
<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
name: 'Video',
props: {
videoUrl: Object
},
data() {
return{
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0],
autoplay: false,
muted: false,
loop: false,
preload: 'auto',
language: 'zh-CN',
aspectRatio: '16:9',
fluid: true,
sources: [{
type: "video/mp4",
src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: "http://localhost/547be638615da10.png",
width: document.documentElement.clientWidth,
notSupportedMessage: ' ， ',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //
}
},
videoButton: require("../video_player.png"),
}
},
components: {
videoPlayer
},
mounted() {
this.playerOptions.sources[0].src = this.videoUrl.a;
this.playerOptions.poster = this.videoUrl.b
},
computed: {
player() {
return this.$refs.videoPlayer.player
}，
playsinline(){
var ua = navigator.userAgent.toLocaleLowerCase();
if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
return false
}else{
return true
}
}
},
methods: {
clickStartButton: function(){
this.$refs.videoPlayer.player.play();
},
onPlayerPlay(player) {
this.videoPlayState = true;
}
}
}
</script>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
