Küçük videoları oynatmak için WeChat uygulaması Douyin savaş destekli cep telefonu
Birçok hayran, Douyin oyunundaki son video makalesinin ardından cep telefonunun neden kullanılamayacağını soran bir mesaj bıraktı!
Editör ayrıca birçok yöntem denedi ve sonunda size bir iyileştirme örneği vermek için deneyimi özetledi.
Oluşturmaya ilk bakın
Önizleme efekti ekran görüntüsü
Ekran görüntüsünü oynatmak için tıklayın
Duraklat düğmesinin ekran görüntüsünü görüntülemek için ekrana tıklayın
Gerçekleşme fikri
Her videoya bir kapak resmi ekleyin. Atlı karınca sırasında yalnızca kapak resmi görüntülenir. Kullanıcı oynatmak için tıkladığında, video tekrar açılır. Kullanıcı videoyu tıkladığında, duraklat düğmesi görüntülenir. Video oynatma katmanını gizlemek ve oynatmayı duraklatmak için duraklat düğmesini tıklayın
Editörün birkaç denemesinden sonra, küçük bir programın yalnızca bir video etiketi ve bir video bağlam örneği kullanmasını öneririm, aksi takdirde birçok tuhaf sorun olacaktır.
Yerel kod değişiklikleri
1. Oynatma istemi düğmesi
< ! - Atlı karınca resimleri - >
< keskin nişancı süre = "{{süre}}" vertical = "true" bindchange = "changeSubject" current = "{{current}}" class = 'swiper' >
< blok wx: for = "{{subjectList}}" wx: key = "* this" >
< swiper-item >
< görüntü src = "{{item.coverUrl}}" mode = 'angleFill' class = "slide-image" bindtap = 'previewSubject' / >
< / swiper-item >
< / blok >
< / keskin nişancı >
< ! - Oynatma istemi düğmesi - >
< görünüm class = 'play-box' wx: if = "{{subject.type == 'video'}}" >
< görüntü src = "/ image / play.png" mode = 'angleFill' class = "icon-play" bindtap = 'previewSubject' / >
< / görünüm >
Atlıkarınca resminin altına, video o sırada görüntülendiğinde görüntülenen bir oynat düğmesi eklenir
Editörün notu: Eğer bu kesinlikle konumlandırılmış bir öğeyse, lütfen kodu sırayla yerleştirin Sayfanın hiyerarşisi kodun sırasına bağlıdır.
2. Video katmanı
< ! - Video katmanı - >
< görünüm class = "videoLayer" hidden = '{{isHiddenVideo}}' >
< video id = "myVideo" src = "{{videoSrc}}" binderror = "videoErrorCallback" autoplay = '{{true}}' controls = '{{false}}' class = 'slide-image' loop = 'true' show -progress = 'false' show-play-btn = 'false' show-center-play-btn = 'true' show-fullscreen-btn = 'false' objectFit = 'dolgu' >
< kapak görünümü class = 'controls' bindtap = "bindSwitchControls" >
< kapak görünümü class = "icon-box" hidden = '{{isHiddenControls}}' >
< Kapak resmi class = 'icon-pause' src = "/ image / pause.png" bindtap = "hidePreview" / >
< / kapak görünümü >
< / kapak görünümü >
< / video >
< / görünüm >
3. Video bileşeni bağlamı
/ **
* Yaşam döngüsü işlevi - sayfanın ilk oluşturulmasının tamamlanmasını izleyin
* /
onReady: function () {
var that = this;
wx.setNavigationBarTitle ({
başlık: "Wei Tik Tok",
})
// Yorum açılır katmanı animasyonu oluşturma
this.animation = wx.createAnimation ({
süresi: 400,
timingFunction: "kolaylık",
gecikme: 0
})
// Video bileşenini başlatın
this.videoContext = wx.createVideoContext ('myVideo')
},
Video bileşenimizi başlatın
4. Videoyu oynatın ve kullanıcı oynat düğmesini tıkladığında videoyu oynatın
previewSubject: function () {
var konu = this.data.subject;
eğer (subject.type == 'video') {
this.setData ({
videoSrc: subject.src,
isHiddenVideo: yanlış
})
}Başka{
wx.previewImage ({
url'ler :,
})
}
},
Eğer bir video ise, video katmanını gösterecek ve otomatik olarak oynayacaktır.Resim ise, önizleme sayfasını açın.Avantajı, bazı büyük resimlerin tüm resmi görmek için önizlenebilmesidir.
5. Videoyu gizle
hidePreview: function () {
var konu = this.data.subject;
eğer (subject.type == 'video') {
// Oynatmayı duraklat
this.videoContext.pause ();
// video katmanını gizle
this.setData ({
isHiddenVideo: true
})
}
},
WeChat video eklentisi manuel duraklatma düğmesini desteklese de stili özelleştiremez.Bu nedenle stil ve olay işlemeyi kendiniz yapmanız önerilir.
6. Duraklat düğmesini ve istisna günlüğünü otomatik olarak gizleyin
zaman: boş,
bindSwitchControls: function () {
eğer (this.time) {
clearTimeout (this.time)
}
var isHidden =! this.data.isHiddenControls;
this.setData ({
isHiddenControls: isHidden
})
// Otomatik gizle düğmesi
var that = this;
eğer (! isHidden) {
this.time = setTimeout (function () {
var isHidden = that.data.isHiddenControls;
eğer (! isHidden) {
that.setData ({
isHiddenControls: true
})
}
}, 3000)
}
},
videoErrorCallback: function (e) {
console.log ('Video hata mesajı:' + this.data.subject.src)
console.log (e.detail.errMsg)
},
Video yanlış oynatılırsa, genellikle günlüğü kaydetmek ve arka plan analizine ve işlemeye geri beslemek gerekir.
Kaynak kodunun tamamı için, Douyin vakasını indirmek için lütfen https://100boot.cn resmi web sitesine gidin.
Daha heyecan verici içerik
- WeChat Mini Programı Pratik Bölümü: Douyin Vaka Kılavuzu
- WeChat Mini Programı Douyin Gerçek Savaş Ana Sayfası (Bölüm 1)
- WeChat Mini Programı Douyin Gerçek Savaş Ana Sayfası (Bölüm 2)
- WeChat Mini Programı: Douyin yorumlarının etkisini fark etmek
- WeChat Mini Program Pazarlamasının Büyük Döner Tablası (2)
- WeChat uygulaması Douyin küçük videoları oynatmak için savaş desteği
Bizi takip et
Kaynak koda ve malzemelere ihtiyacınız varsa, "IT Combat Alliance" a dikkat edip bir mesaj bırakabilirsiniz (WeChat alışveriş merkezi kaynak kodu, 5 karakter kaynak kodu indirme adresini alacaktır, birçok sapmadan kaçınmak için kaynak koddaki kullanım kılavuzuna baktığınızdan emin olun) veya değişim grubuna katılın ve Yazarlar birbirleriyle flört ediyor ~~~
