HTML5在手机端实现视频全屏展示方法
刚子 发布于 阅读：101
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>视频播放器</title>
<style type="text/css">
*{margin:0px; padding:0px;}
.app{width: 100%; height:100%; position: absolute; top:0px; right:0px; bottom: 0px; left:0px; overflow: hidden;}
.video{width: 100%; height: 100%;}
#my-video{object-fit: cover; object-position: center center;}
</style>
</head>
<body>
<div id="app" class="app">
<video preload='auto' id='my-video' ref="video" :src="videoUrl" @click="player" loop autoplay="autoplay" webkit-playsinline='true' playsinline='true'x-webkit-airplay='true' x5-video-player-type='h5' x5-video-player-fullscreen='true'x5-video-ignore-metadata='true' width='100%' height='100%'><p> 不支持video</p> </video>
</div>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
// vue 解析
var Application = new Vue({
el: "#app",
data: {
videoUrl:'',
video:null,
},
mounted: function(){
this.videoUrl = "http://v3-default.ixigua.com/c10ec32d09b73b0bff019254cf8b79a1/66141b22/video/tos/cn/tos-cn-ve-15/ooZgAqd7sNB9icDIBRbKhg37PWKEAPiIlQTQJ/?a=1768&ch=0&cr=0&dr=0&er=0&lr=unwatermarked&net=5&cd=0|0|0|0&cv=1&br=1187&bt=1187&cs=0&ds=3&ft=ahW46QQqUnXfmoZmo0OW_QYaUqiXBUqTxVJEU0IxrCPD-Ipz&mime_type=video_mp4&qs=0&rc=OzhoOjxnPGY5ZzY0Ozg4Z0Bpam04NnE5cmprcTMzNGkzM0AuYjBjYGNgNWIxXi0tNl8tYSNxYGAyMmQ0L2FgLS1kLS9zcw==&btag=e00038000&dy_q=1712581943&feature_id=f0150a16a324336cda5d6dd0b69ed299&l=20240408211223D5C249E7E44AF73B75EF";
this.video = this.$refs.video;
},
methods: {
player:function(){
console.log(this.video.clientWidth);
console.log(this.video.clientHeight);
if(this.video.paused){
// 播放
this.video.play();
}else{
// 暂停
this.video.pause()
};
}
}
});
</script>
</html>