播放功能实现

pages/detail/detail.vue

@@ -97,15 +97,15 @@ export default {
  playEvent() {
  if (this.playList.length <= 1) {
  const d = this.playList[0];
- const url = `/pages/play/play?site=${d.extra.site}&id=${d.extra.id}&url=${d.value}`;
+ const url = `/pages/play/play?site=${d.extra.site}&id=${d.extra.id}&name=${d.label}&url=${d.value}`;
  this.$u.route({ url: url });
  } else {
  this.playShow = !this.playShow;
  }
  },
  playConfirm(e) {
  const d = e[0];
- const url = `/pages/play/play?site=${d.extra.site}&id=${d.extra.id}&url=${d.value}`;
+ const url = `/pages/play/play?site=${d.extra.site}&id=${d.extra.id}&name=${d.label}&url=${d.value}`;
  this.$u.route({ url: url });
  },
  async getDetail(key, id) {
@@ -115,6 +115,7 @@ export default {
  for (const i of res.m3u8List) {
  const j = i.split("$");
  let d = {
+ index: i,
  value: j[1],
  label: j[0],
  extra: {

pages/film/film.vue

@@ -16,7 +16,7 @@
  <u-button @click="openTypeSelect" size="mini"
  >分类: {{ type.name }}</u-button
  >
- <text>{{pageCount}}--共: {{recordcount}} 资源</text>
+ <text>共: {{recordcount}} 资源</text>
  </view>
  <view class="body">
  <u-waterfall v-model="flowList" ref="uWaterfall">

pages/play/play.vue

@@ -1,64 +1,98 @@
 <template>
- <view class="play">
+ <view class="play">
  <view class="play-box">
- <video class="player" src="https://yuledy.helanzuida.com/20200914/10914_1fd2fcf5/index.m3u8"></video>
+ <video class="player" :autoplay="true" :src="url"></video>
  </view>
  <view class="icon-box">
  <u-icon name="star" size="60"></u-icon>
  <u-icon name="star-fill" size="60"></u-icon>
- <u-icon name="share" size="60" style="margin-left: 20rpx;"></u-icon>
+ <u-icon name="share" size="60" style="margin-left: 20rpx"></u-icon>
  </view>
  <view class="btn-box">
- <u-button class="playBtn" plain :ripple="true" @click="selectPlay">选集播放</u-button>
+ <u-button class="playBtn" plain :ripple="true" @click="selectPlay"
+ >选集播放</u-button
+ >
  </view>
- <u-select v-model="playShow" :list="playList" confirm-text="播放" @confirm="playConfirm"></u-select>
- </view>
+ <u-select
+ v-model="playShow"
+ :list="playList"
+ confirm-text="播放"
+ @confirm="playConfirm"
+ ></u-select>
+ </view>
 </template>
 
 <script>
- export default {
- data() {
- return {
- site: '',
- uuid: '',
- url: '',
- playShow: false,
- playList: []
- }
- },
- methods: {
- selectPlay () {
- this.playShow = !this.playShow;
- },
- playConfirm (e) {}
- },
- onLoad (opt) {
- this.site = opt.site
- this.uuid = opt.uuid
- this.url = opt.url
- uni.setNavigationBarTitle({ title: '名字' })
- }
- }
+import http from "../../utils/request.js";
+export default {
+ data() {
+ return {
+ siteKey: "",
+ id: "",
+ name: "",
+ url: "",
+ playShow: false,
+ playList: [],
+ };
+ },
+ methods: {
+ selectPlay() {
+ this.playShow = !this.playShow;
+ },
+ playConfirm(e) {
+ console.log(e)
+ const d = e[0];
+ this.url = d.value
+ uni.setNavigationBarTitle({ title: d.label });
+ },
+ async getDetail(key, id) {
+ const res = await http.detail(key, id);
+ const arr = [];
+ for (const i of res.m3u8List) {
+ const j = i.split("$");
+ let d = {
+ index: i,
+ value: j[1],
+ label: j[0],
+ extra: {
+ site: key,
+ id: id,
+ },
+ };
+ arr.push(d);
+ }
+ this.playList = arr;
+ },
+ },
+ onLoad(opt) {
+ this.siteKey = opt.site;
+ this.id = opt.id;
+ this.name = opt.name;
+ this.url = opt.url;
+ this.getDetail(this.siteKey, this.id)
+ uni.setNavigationBarTitle({ title: opt.name });
+ }
+};
 </script>
 
 <style lang="scss" scoped>
-.play{
- .play-box{
- .player{
+.play {
+ .play-box {
+ .player {
  width: 100vw;
- } 
+ }
  }
- .icon-box{
+ .icon-box {
  padding: 20px 10%;
  display: flex;
  justify-content: flex-end;
  }
- .btn-box{
+ .btn-box {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
- .playBtn{
+ .playBtn {
  width: 80%;
  margin: 0 auto;
  }