master

分支 (1)

管理

管理

master

video_short_video
/
index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<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{position:absolute;top:0;bottom:0;text-align:center;width:100%;}
@media screen and (min-width:480px){body{ background: #ccc;}#my-video{width:480px;object-fit: cover;object-position: center center;}}
@media screen and (max-width:480px){#my-video{width:100%;height:100%;object-fit: cover;object-position: center center;}}
section{position:fixed;bottom:30px;right:20px;}
a{background:#598263;color:#fff;width:64px;padding:10px 20px;margin-left:10px;border-radius:10px;font-size:14px;}
.page{position:fixed;right:8px;top:8px;font-size:14px;padding:4px 8px;color:red;background:antiquewhite;border-radius:8px;}
</style>
</head>
<body>
<div id="app" class="app">
    <span class="page" ><b style="color:green">『 点击屏幕可以播放或暂停哦 』</b>当前所在第<b v-html="page"></b>页</span>
    <video preload='auto' id='my-video' ref="video"
    :src="videoUrl"
    @click="player"
    :poster="imgSrc"
    v-on:error.prevent="videoLoadError"
    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'><p>不支持video</p></video>
    <section>
        <a @click="home">首页</a>
        <a @click="prePage">上一页</a>
        <a @click="nextPage">下一页</a>
        <a @click="end">尾页</a>
    </section>
</div>

</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script type="text/javascript">
    $.getJSON ("MP4.json", function (data){
        new Vue({
            el: "#app",
            data: {
                page:0,
                videoUrl:'',
                video:null,
                imgSrc:'loading.png'
            },
            beforeMount: function(){
                this.page = localStorage.getItem('girlPage')?localStorage.getItem('girlPage'):0;
            },
            mounted: function(){
                this.videoUrl = data[this.page];
                this.video = this.$refs.video;
            },
            methods: {
                prePage:function(){
                    if(this.page==0){
                        alert('这里是首页哦~~');
                        return;
                    }
                    this.page--;
                    this.videoUrl = data[this.page];
                    localStorage.setItem('girlPage', this.page);
                    this.imgSrc = 'loading.png';
                },
                nextPage:function(){
                    if(this.page == 11199){
                        alert('到头了哦~~');
                        return;
                    }
                    this.page++;
                    this.videoUrl = data[this.page];
                    localStorage.setItem('girlPage', this.page);
                    this.imgSrc = 'loading.png';
                },
                player:function(){
                    if(this.video.paused){
                        this.video.play();// 播放
                    }else{
                        this.video.pause();// 暂停
                    };
                },
                home:function(){
                    this.page = 0;
                    this.videoUrl = data[this.page];
                    localStorage.setItem('girlPage', this.page);
                    this.imgSrc = 'loading.png';
                },
                end:function(){
                    this.page = 11199;
                    this.videoUrl = data[this.page];
                    localStorage.setItem('girlPage', this.page);
                    this.imgSrc = 'loading.png';
                },
                videoLoadError:function(){
                    console.log('链接不存在');
                    this.imgSrc = 'error.png';
                }
            }
        });

    });
</script>
</html>