0
我需要一些幫助來處理正在進行的項目。我使用播放列表構建了HTML5視頻,並且在GA中設置多個標籤時遇到問題,因此我可以跟蹤每個單獨的視頻播放。我在網上找到了代碼,但遇到了一些將其更改爲我的視頻播放器的問題。我希望能夠將標籤設置爲屬性數據描述任何幫助將不勝感激。 https://jsfiddle.net/2zkyh1f2/發射事件時遺傳算法中的標籤未設置
的代碼如下:
<section id="video-container">
<video id="video-player" controls="controls" poster="" src="" data-description=""></video>
<div id="description" label="" type="text"> </div>
<ul id="playlist">
<li id="videoweek" data-description movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 1 " type="video/mp4" moviesposter="http://html5videoformatconverter.com/data/images/screen.jpg">
<img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail">
</li>
<li id="videoweek" data-description="video 1" movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 2 " type="video/mp4"> <img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail"></li>
<li id="videoweek" data-description="video 2"n movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 3 " type="video/mp4"> <img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail"></li>
<li id="videoweek" data-description="video 3" movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 4 " type="video/mp4"> <img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail"></li>
<li id="videoweek" data-description="video 4" movieurl="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" label="This is video number 5 " type="video/mp4"> <img src="http://html5videoformatconverter.com/data/images/screen.jpg" class="video-thumbnail"></li>
</ul>
</section>
$(function() {
$("#playlist li").on("click", function() {
$("#video-player").attr({
"src": $(this).attr("movieurl"),
"poster": "",
"autoplay": "autoplay",
"data-description": $(this).attr("data-description")
})
})
$("#playlist li").on("click", function() {
$("#description").attr({
"label": $(this).attr("label")
}).text($(this).attr("label"))
})
$("#video-player").attr({
"src": $("#playlist li").eq(0).attr("movieurl"),
"poster": $("#playlist li").eq(0).attr("moviesposter"),
"data-description": $("#playlist li").eq(0).attr("data-description")
})
})
document.addEventListener('DOMContentLoaded', init, false)
var videoId = document.getElementById('video-player')
//var videoTitle = $(this).attr('data-description')
var videoTitle = $('#videoweek').click(function() {
console.log($(this).attr('data-description'));
});
console.log(videoTitle);
function init() {
videoId.addEventListener('ended', videoEnd, false)
videoId.addEventListener('timeupdate', videoTimeUpdate, false)
videoId.addEventListener('play', videoPlay, false)
videoId.addEventListener('pause', videoPause, false)
}
function setKeyFrames (duration) {
var quarter = (duration/4).toFixed(1)
sessionStorage.setItem('one', quarter)
sessionStorage.setItem('two', (quarter * 2).toFixed(1))
sessionStorage.setItem('three', (quarter * 3).toFixed(1))
}
function videoTimeUpdate() {
var curTime = videoId.currentTime.toFixed(1)
switch (curTime) {
case sessionStorage.getItem('one'):
ga('send', 'event', 'video', '25% video played', videoTitle)
sessionStorage.setItem('one', null)
case sessionStorage.getItem('two'):
ga('send', 'event', 'video', '50% video played', videoTitle)
sessionStorage.setItem('two', null)
case sessionStorage.getItem('three'):
ga('send', 'event', 'video', '75% video played', videoTitle)
sessionStorage.setItem('three', null)
}
}
function videoEnd() {
ga('send', 'event', 'video', '100% video played', videoTitle)
}
function videoPlay() {
ga('send', 'event', 'video', 'video played', videoTitle)
setKeyFrames(this.duration)
}
function videoPause() {
ga('send', 'event', 'video', 'video paused', videoTitle)
}
感謝您的幫助。 這工作正常,但它總是發送給GA相同的數據描述,除非我刷新頁面。有什麼方法可以發送不同的數據描述而不刷新頁面? – Joe
@Joe,我測試了上面的代碼。 'data-description'根據點擊的'videoweek'而變化,而不刷新頁面。你的網頁是以這種方式運行的嗎? –
是的抱歉,它現在工作,謝謝堆 – Joe