分类：html5

videojs动态切换m3u8与路由切换后在vue中不能重复定义设置配置

2021年6月6日 Leave a comment chenjianle

在vue上使用videojs播放m3u8文件，然后在页面切换到下一个页面的时候，出现播放器重复定义的问题：

提示：Player “my-video” is already initialised. Options will not be applied.

需要在路由销毁前把播放器销毁即可，然后mounted的时候进行初始化。

具体代码

<video      ref="myVideoPlayer"
          id="my-video"
          class="video-js vjs-default-skin vjs-big-play-centered"
          controls
         style="width: 100%;height:100%"
      >
        <source type="application/x-mpegURL" />
      </video>


js部分
mounted（）{
 this.myPlayer = videojs(
          "my-video",
          {
            bigPlayButton: true,
            textTrackDisplay: false,
            posterImage: true,
            errorDisplay: false,
            controlBar: true,
            controls:true,
            hls: {
              withCredentials: true
            }
          },
          function () {
            this.on('play', function () {
              console.log('playing')
                that.doPlay()
            })
            //this.play();
            console.log('myPlayer ready')
          }
      );}
 beforeDestroy() {
    this.myPlayer.dispose();  //销毁播放器
  }

jq社会主义核心价值观点击特效

2018年7月13日 Leave a comment chenjianle

(function() {var coreSocialistValues = [“富强”, “民主”, “文明”, “和谐”, “自由”, “平等”, “公正”, “法治”, “爱国”, “敬业”, “诚信”, “友善”], index = Math.floor(Math.random() * coreSocialistValues.length);document.body.addEventListener(‘click’, function(e) {if (e.target.tagName == ‘A’) {return;}var x = e.pageX, y = e.pageY, span = document.createElement(‘span’);span.textContent = coreSocialistValues[index];index = (index + 1) % coreSocialistValues.length;span.style.cssText = [‘z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ‘, y – 20, ‘px; left: ‘, x, ‘px;’].join(”);document.body.appendChild(span);animate(span);});function animate(el) {var i = 0, top = parseInt(el.style.top), id = setInterval(frame, 16.7);function frame() {if (i > 180) {clearInterval(id);el.parentNode.removeChild(el);} else {i+=2;el.style.top = top – i + ‘px’;el.style.opacity = (180 – i) / 180;}}}}());

从url上获取一个参数的值

2018年2月18日 No Comments chenjianle

//paraName 等找参数的名称
function GetUrlParam(paraName) {
var url = document.location.toString();
var arrObj = url.split(“?”);

if (arrObj.length > 1) {
var arrPara = arrObj[1].split(“&”);
var arr;

for (var i = 0; i < arrPara.length; i++) {
arr = arrPara[i].split(“=”);

if (arr != null && arr[0] == paraName) {
return arr[1];
}
}
return “”;
}
else {
return “”;
}
}