首先建一个文件,里面放要加载的视频
<style></style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link href="<?php echo base_url('resource/css/style.css') ?>"rel="stylesheet" type="text/css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script><div style="background: #000000"><video id="video" src="<?php echo base_url('resource/taihe.mp4') ?>" autoplay="autoplay" muted="muted"style="width: 100%;height: 100%"></video></div><script>new Vue({el: 'video',beforeCreate: function () {},data() {return {}},created: function () {},mounted: function () {myVid = document.getElementById("video");myVid.addEventListener('ended', function () {window.location.href = "<?php echo base_url('index') ?>";});},methods: {}})
</script>
<script></script>
<style></style>
注意:在视频加载结束后添加监听器判断结束后的操作步骤,在视频结束后跳到首页。
mounted: function () {myVid = document.getElementById("video");myVid.addEventListener('ended', function () {window.location.href = "<?php echo base_url('index') ?>";});},
正常video会有视频播放下面的展厅之类的按钮功能栏,但是我不像要展示出来,所以没有添加controler那个属性,然后在网上查autoplay="autoplay"这个是自动播放的属性,但是实际放上去不好用,所以有一番查找后,还要加上 muted="muted"就好用啦!
<video id="video" src="<?php echo base_url('resource/taihe.mp4') ?>" autoplay="autoplay" muted="muted"style="width: 100%;height: 100%"></video>
最后最后,想要默认让进入网站后第一个执行默认页是视频这一页,要在routes.php文件里面更改一下
就OK啦!