c参考：
在网上找了些案例
下面监听视频的进入全屏、退出全屏事件
//进入全屏
function FullScreen() {
var ele = document.documentElement;
if (ele .requestFullscreen) {
ele .requestFullscreen();
} else if (ele .mozRequestFullScreen) {
ele .mozRequestFullScreen();
} else if (ele .webkitRequestFullScreen) {
ele .webkitRequestFullScreen();
}
}
//退出全屏
exitFullscreen(elem) {
elem = elem || document;
if (elem.cancelFullScreen) {
elem.cancelFullScreen();
} else if (elem.mozCancelFullScreen) {
elem.mozCancelFullScreen();
} else if (elem.webkitCancelFullScreen) {
elem.webkitCancelFullScreen();
} else if (elem.webkitExitFullScreen) {
elem.webkitExitFullScreen()
}
}
// 播放结束时
$(video).on('ended',function(){
//退出全屏
exitFullscreen()
});
// 【进入全屏webkitbeginfullscreen】-【退出全屏webkitendfullscreen】
$(video).on('webkitbeginfullscreen', function() {
video.play();
}).on('webkitendfullscreen', function() {
video.pause();
});
阿里云点播(vue)
重点：安卓微信要使用同层播放，使用监听事件（进入全屏：x5requestFullScreen,
退出全屏：x5cancelFullScreen）
ios（进入全屏：requestFullScreen）
但需要使用如下监听退出全屏
document.querySelector("#player-con video").addEventListener("webkitendfullscreen",function(options){
console.log(player.isFullscreen(),"---- ios webkitendfullscreen 退出全屏 ----")
})
util.js(引入aliplayer-min.js)
export function aliPlayerJs(isDefer = false){
return new Promise((resolve,reject)=>{
if(window.Aliplayer){
resolve(true)
}else {
const link = document.createElement('link');
link.rel = "stylesheet";
link.href = "https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css";
document.head.appendChild(link);
const script = document.createElement('script')
script.type = 'text/javascript'
isDefer && (script.defer = isDefer);
!isDefer && (script.async = !isDefer);
script.src = 'https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js'
script.onerror = reject
script.onload = function () {
resolve(true)
}
document.head.appendChild(script);
return false
}
})
}
组件aliPlayer
<!-- * @Author: your name * @Date: 2020-08-24 15:52:36
* @LastEditTime: 2020-08-31 20:06:25
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \ksh-doctor\src\components\aliPlayer.vue
-->
<template>
<div id="player-con" class="playerBox"></div>
</template>
<script>
import {aliPlayerJs} from '@/util/Util'
export default {
name: "aliPlayer",
props: {
aliPlayOptions: {
type: Object,
default: () => {},
},
meetingId: {
type: String,
default: "",
},
},
data() {
return {
player: null,
vedioId: "",
speed: true,
};
},
watch: {
aliPlayOptions: {
deep: true,
handler(options, oldOptions) {
aliPlayerJs().then(res=>{
if(res){
options.source && this.measureBW(this.onPlayer);
}
})
},
},
meetingId(val, oldVal) {
this.vedioId = val;
},
},
mounted() { },
destroyed() {
document.querySelector("#player-con video").removeEventListener("webkitendfullscreen")
},
methods: {
onPlayer(isM3u8 = true, isLd = true) {
const that = this;
if (this.player) {
this.player.dispose();
}
let options = JSON.parse(JSON.stringify(this.aliPlayOptions));
const playTypeFun = function (typeStr) {
let obj = JSON.parse(typeStr);
if (obj.LD && obj.FD) {
options = Object.assign({}, options, {
source: isLd ? obj.LD : obj.FD,
});
} else {
options = Object.assign({}, options, { source: typeStr });
}
};
if (isM3u8 && options.source.m3u8 !== "{}") {
playTypeFun(options.source.m3u8);
} else {
playTypeFun(options.source.mp4);
}
this.player = new Aliplayer(options, (player) => {
player.on("ready", (options) => {
document.querySelector("#player-con video").addEventListener("webkitendfullscreen",function(options){ that.$emit("cancelFullScreen", options);
console.log(player.isFullscreen(),"-------------------- ios webkitendfullscreen 退出全屏 --------------------------")
})
});
player.on("play", (options) => {
console.log('播放');
that.$emit("play", options);
});
player.on("pause", (options) => {
that.$emit("pause", options);
});
player.on("timeupdate", (options) => {
that.$emit("timeupdate", options);
});
player.on("x5requestFullScreen",(options) => {
that.$emit("fullScreen", options);
console.log(player.isFullscreen(),"全屏");
});
player.on("x5cancelFullScreen",(options) => {
that.$emit("cancelFullScreen", options);
console.log(player.isFullscreen(),"监听退出全屏");
});
player.on("requestFullScreen",(options) => {
that.$emit("fullScreen", options);
console.log(player.isFullscreen(),"-------------- 全屏 -----------")
});
player.on("cancelFullScreen",(options) => {
that.$emit("cancelFullScreen", options);
console.log(player.isFullscreen(),"------------------ 监听退出全屏 -----------------")
});
player.on("ended", (options) => {
that.$emit("ended", options);
});
player.on("waiting", (options) => {
});
player.on("error", (options) => {
// 新版本埋点
window.AnalysysAgent.track('doctor_ksh_video_error', {
error_code: options.paramData.error_code,
error_msg: options.paramData.error_msg
});
that.$emit("error", options);
if (options.paramData.error_code === 4011) {
that.onPlayer(false, that.speed);
}
//错误提示
if(options.paramData.error_code === 4400 || options.paramData.error_code === 4440){
document.querySelector(".prism-error-content>p").innerHTML = "由于服务器或网络原因不能加载资源，或者格式不支持"
}
});
});
this.player.isFullscreen = function(){
return that.player.fullscreenService.getIsFullScreen();
}
return this.player;
},
measureBW(fn) {
const that = this;
// ---------- 判断网络类型
var ua = navigator.userAgent;
if (!ua) {
this.speed = false;
fn(true, false);
return false;
}
var networkStr = ua.match(/NetType\/\w+/)
? ua.match(/NetType\/\w+/)[0]
: "NetType/other";
networkStr = networkStr.toLowerCase().replace("nettype/", "");
const arr = ["wifi", "5g", "4g", "other", "WIFI", "Wifi", "5G", "4G"];
if (arr.includes(networkStr)) {
this.speed = true;
fn(true, true);
} else {
this.speed = false;
fn(true, false);
}
},
},
};
</script><style type="text/css">
.prism-player .prism-big-play-btn {
left: calc(50% - 32px) !important;
}
.prism-cc-btn { display: none;}
#player-con video {
object-fit: contain !important;
height: 100% !important;
}
</style><style type="text/css" lang='stylus'scoped>
.playerBox {
position: relative;
left: 0;
top: 0;
z-index: 1100;
background: #eeeeee;
}
</style>
父组件
ali-player(
ref="videoPlayer",
:aliPlayOptions="aliPlayOptions",
@play="onPlay($event)",
@pause="onPause($event)",
@error="onError($event)",
@ended="onEnd($event)",
@timeupdate="onVideoUpate($event)",
@fullScreen="onFullscreenchange($event)",
@cancelFullScreen="onCancelFullscreen($event)"
)
data(){
aliPlayOptions: {
id: "player-con",
source: "",
width: "100%",
height: (document.body.clientWidth / 16) * 9 + "px",
autoplay: false,
isLive: false,
rePlay: false,
playsinline: true,
preload: true,
controlBarVisibility: "click",
showBarTime: 5000,
useH5Prism: true,
x5_type: 'h5',
x5_fullscreen: false,
x5_video_position: 'normal',
x5_orientation: 'landscape',
// x5LandscapeAsFullScreen: true,
skinLayout: [
{
name: "bigPlayButton",
align: "blabs",
x: 30,
y: 80,
},
{
name: "H5Loading",
align: "cc",
},
{
name: "errorDisplay",
align: "tlabs",
x: 0,
y: 0,
},
{
name: "infoDisplay",
},
{
name: "tooltip",
align: "blabs",
x: 0,
y: 56,
},
{
name: "thumbnail",
},
{
name: "controlBar",
align: "blabs",
x: 0,
y: 0,
children: [
{
name: "progress",
align: "blabs",
x: 0,
y: 44,
},
{
name: "playButton",
align: "tl",
x: 15,
y: 12,
},
{
name: "timeDisplay",
align: "tl",
x: 10,
y: 7,
},
{
name: "fullScreenButton",
align: "tr",
x: 10,
y: 12,
},
{
name: "volume",
align: "tr",
x: 5,
y: 10,
},
],
},
],
},
},
computed: {
player() {
return this.$refs.videoPlayer && this.$refs.videoPlayer.player;
},
},
methods: {
onFullscreenchange(event) {
// 全屏
this.player.isFullscreen = function(){
return true;
}
},
onCancelFullscreen(){
// 非全屏
this.player.isFullscreen = function(){
return false;
}
},
}
