Skip to content

Commit

Permalink
add music plugin & fix flv plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
yinguohui committed Aug 22, 2018
2 parents 1f1d802 + 7d08486 commit 9dd1c57
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 22 deletions.
4 changes: 2 additions & 2 deletions packages/xgplayer/browser/index.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/xgplayer/dist/index.js
View file

Large diffs are not rendered by default.

76 changes: 73 additions & 3 deletions packages/xgplayer/src/control/mobile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,10 @@ let mobile = function () {
player.start()
if (pass) {
if (player.config.enterLogo) {
enterLogo.src = player.config.enterLogo;
logo.style.backgroundImage = `url("${player.config.enterLogo}")`
enterLogo.src = player.config.enterLogo
logo.style.backgroundImage = `url("${player.config.enterLogo}")`
} else {
enterLogo.src = util.getBgImage(logo);
enterLogo.src = util.getBgImage(logo)
}
player.video.addEventListener('touchstart', (e) => {
e.preventDefault()
Expand Down Expand Up @@ -106,6 +106,76 @@ let mobile = function () {
player.on('pause', () => {
svg.reset(iconPath.pause, iconPath.play)
})

player.config.volume = player.config.autoplay ? 0 : (player.config.volume !== null ? player.config.volume : 1)
let volume = player.config.volume !== 0 && player.config.volume !== 1 ? 1 : player.config.volume; let scale = 0.0220625
if (volume === 0) {
player.video.muted = true
}
let volumePath = {
muted: 'M920.4 439.808l-108.544-109.056-72.704 72.704 109.568 108.544-109.056 108.544 72.704 72.704 108.032-109.568 108.544 109.056 72.704-72.704-109.568-108.032 109.056-108.544-72.704-72.704-108.032 109.568z',
large: 'M940.632 837.632l-72.192-72.192c65.114-64.745 105.412-154.386 105.412-253.44s-40.299-188.695-105.396-253.424l-0.016-0.016 72.192-72.192c83.639 83.197 135.401 198.37 135.401 325.632s-51.762 242.434-135.381 325.612l-0.020 0.020zM795.648 693.248l-72.704-72.704c27.756-27.789 44.921-66.162 44.921-108.544s-17.165-80.755-44.922-108.546l0.002 0.002 72.704-72.704c46.713 46.235 75.639 110.363 75.639 181.248s-28.926 135.013-75.617 181.227l-0.021 0.021z'
}
let v2s = (vol) => {
let s = ''
if (vol === 0) {
s = 'muted'
} else {
s = 'large'
}
return s
}
let curIocnPath = volumePath[v2s(volume)]
let defaultPath = volumePath[v2s(volume)]
let container = util.createDom('xg-volume', `<xg-icon class="xgplayer-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<path transform="scale(${scale} ${scale})" d="M358.4 358.4h-204.8v307.2h204.8l256 256v-819.2l-256 256z"></path>
<path transform="scale(${scale} ${scale})" d="${defaultPath}"></path>
</svg>
</xg-icon>`,
{}, 'xgplayer-volume')
player.controls.appendChild(container)
let icon = container.querySelector('.xgplayer-icon')
let pathVolume = container.querySelectorAll('path')[1]
let svgVolume = new SVG({
progress: (shape, percent) => {
let _p = svg.toSVGString(shape)
pathVolume.setAttribute('d', _p)
curIocnPath = _p
},
from: curIocnPath,
to: volumePath['large']
});
['touchend', 'mousedown'].forEach((item) => {
icon.addEventListener(item, function (e) {
e.preventDefault()
e.stopPropagation()
if (player.video.muted) {
player.video.muted = false
player.volume = 1
svgVolume.reset(volumePath['large'], volumePath['muted'])
curIocnPath = volumePath['large']
} else {
player.volume = 0
player.video.muted = true
svgVolume.reset(volumePath['muted'], volumePath['large'])
curIocnPath = volumePath['muted']
}
})
})
// let _changeTimer = null
// player.on('volumechange', function () {
// if (_changeTimer) {
// clearTimeout(_changeTimer)
// }
// _changeTimer = setTimeout(() => {
// svgVolume.reset(volumePath[v2s(player.volume)], curIocnPath)
// curIocnPath = volumePath[v2s[player.volume]]
// }, 50)
// })
player.once('destroy', () => {
container = null
})
} else {
util.addClass(root, 'xgplayer-mobile-npassed')
player.once('ready', function () {
Expand Down
25 changes: 10 additions & 15 deletions packages/xgplayer/src/control/volume.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import Player from '../player'
import SVG from '../utils/svg'

let volume = function () {
let player = this; let util = Player.util; let scale = 0.0220625
let player = this; let util = Player.util; let sniffer = Player.sniffer; let scale = 0.0220625
if (sniffer.device === 'mobile') {
return
}
player.config.volume = player.config.autoplay ? 0 : player.config.volume
let volume = player.config.volume
let iconPath = {
muted: 'M920.4 439.808l-108.544-109.056-72.704 72.704 109.568 108.544-109.056 108.544 72.704 72.704 108.032-109.568 108.544 109.056 72.704-72.704-109.568-108.032 109.056-108.544-72.704-72.704-108.032 109.568z',
Expand Down Expand Up @@ -41,7 +45,7 @@ let volume = function () {
let selected = container.querySelector('.xgplayer-drag')
let icon = container.querySelector('.xgplayer-icon')
selected.style.height = `${player.config.volume * 100}%`
let path = root.querySelectorAll('path')[1]
let path = container.querySelectorAll('path')[1]
let svg = new SVG({
progress: (shape, percent) => {
let _p = svg.toSVGString(shape)
Expand All @@ -54,10 +58,11 @@ let volume = function () {
let barSize = null
slider.volume = player.config.volume;

['touchstart', 'mousedown'].forEach(item => {
['touchend', 'mousedown'].forEach(item => {
bar.addEventListener(item, function (e) {
e.preventDefault()
e.stopPropagation()
player.video.muted = false
slider.focus()
util.event(e)
containerHeight = bar.getBoundingClientRect().height
Expand Down Expand Up @@ -107,10 +112,11 @@ let volume = function () {
})
});

['touchstart', 'mousedown'].forEach((item) => {
['touchend', 'mousedown'].forEach((item) => {
icon.addEventListener(item, function (e) {
e.preventDefault()
e.stopPropagation()
player.video.muted = false
if (util.hasClass(slider, 'xgplayer-none')) {
util.removeClass(slider, 'xgplayer-none')
slider.focus()
Expand All @@ -131,12 +137,7 @@ let volume = function () {
})

let _changeTimer = null
let firstVolChanged = 0;
player.on('volumechange', function () {
if (firstVolChanged === 1) {
player.video.muted = false
firstVolChanged = 2
}
if (_changeTimer) {
clearTimeout(_changeTimer)
}
Expand All @@ -150,12 +151,6 @@ let volume = function () {
}, 50)
})

player.once('volumechange', function () {
if (player.config.autoplay) {
firstVolChanged = 1
}
})

player.once('canplay', function () {
if (player.config.autoplay) {
player.volume = 0
Expand Down
3 changes: 3 additions & 0 deletions packages/xgplayer/src/player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@ class Player extends Proxy {
['focus', 'blur'].forEach(item => {
this.on(item, this['on' + item.charAt(0).toUpperCase() + item.slice(1)])
})
let player = this
this.root.addEventListener('mousemove', () => { player.onFocus() })

setTimeout(() => {
this.emit('ready')
}, 0)
Expand Down

0 comments on commit 9dd1c57

Please sign in to comment.