效果:
获取电影数据每行3个
video.html
<div id="item-video-animation" class="mui-control-content">
<div id="videoAnimation" style="text-align: center; margin: 15px 10px 15px 10px;">
<div style="width: 33%; float: left;" v-for="animation in animations">
<ul @click="videoDetail(animation)">
<li>
<img width="90%" alt="" :src="animation.filmUrlPoster">
</li>
<li style="height: 44px" v-text="animation.filmTitle"></li>
</ul>
</div>
</div>
</div>
admination怎么来的?
methods: {
videoDetail: function (film) {
sessionStorage.setItem('filmJson', JSON.stringify(film));
location.href = "video_detail.html";
}
}
video_detail.html
播放按钮
<button type="button"style="width: 100%; padding: 15px;" v-on:click="videoPlay(film.filmUrlVideo)">播放</button>
script
var app = new Vue({
el: '#app',
data: {
film: {}
},
created: function() {
var filmJson = sessionStorage.getItem('filmJson');
// console.log(filmJson)
var filmObj = JSON.parse(filmJson);
// console.log(filmObj)
filmObj.allFilmThumbsUrl = filmObj.filmUrlThumbs.split('|');
this.film = filmObj;
},
methods: {
videoPlay: function (filmUrl) {
sessionStorage.setItem('filmUrl', filmUrl);
location.href = 'video_play.html';
}
}
})
video_play.html
<div id="videoPlayerDiv">
<video id="video" controls>
</video>
</div>
var video = document.getElementById('video');
var source = document.createElement('source');
source.setAttribute('src', sessionStorage.getItem('filmUrl'));
video.appendChild(source);
video.play();