video.js问题总结

video.js问题总结

在vue项目中采用video.js作为视频播放组件。出现以下问题：

无法播放（点击无效）

如下代码，UI正常显示，点击播放按钮无法播放。

<video ref="video" src="xxxxxx" class="video-js" controls>
    
</video>

<script>
    import videojs from "video.js"
	import "video.js/dist/video-js.css";
	export default {
        data() {
            return {
                player: null;
            }
        }
        mounted() {
            this.player = videojs(this.$refs.video);
        }
    }
</script>

解决方案：在video标签内添加source标签，将视频资源交给source标签控制。

<video ref="video" class="video-js" controls>
    <source src="xxxxxx">
</video>

<script>
    import videojs from "video.js"
	import "video.js/dist/video-js.css";
	export default {
        data() {
            return {
                player: null;
            }
        }
        mounted() {
            this.player = videojs(this.$refs.video);
        }
    }
</script>

动态设置资源地址，播放报错

source标签src属性改变，如下代码会导致video.js报错

<video ref="video" class="video-js" controls>
    <source :src="this.srcAddress">
</video>

<script>
    import videojs from "video.js"
	import "video.js/dist/video-js.css";
	export default {
        props: {
            srcAddress: {
                required: true,
                type: String,
                default: "xxxxxxx"
            }
        }
        data() {
            return {
                player: null;
            }
        }
        mounted() {
            this.player = videojs(this.$refs.video);
        }
    }
</script>

解决方案：每次需要改变video地址的时候重新渲染element

<div ref="videoDiv">
</div>


<script>
    import videojs from "video.js"
	import "video.js/dist/video-js.css";
	export default {
        props: {
            srcAddress: {
                required: true,
                type: String,
                default: "xxxxxxx"
            }
        }
        data() {
            return {
                player: null;
                srcPath: null;
            }
        }
    	watch: {
            srcAddress: {
                handler(val) {
                    if (this.srcPath != this.srcAddress) {
                        this.srcPath = this.srcAddress;
                        this.initVideo();
                    }
                }
            }
        }
        mounted() {
            this.initVideo();
        }
    	methods: {
            initVideo() {
                let this.$refs.videoDiv.innerHTML = 
                    // 下面两种方法都无法实现有效识别。使用id获取element有id冲突，而vue的$refs对象无法在dom渲染结束后修改
                    // '<video id="video" class="video-js" controls' +
                    // '<video ref="video" class="video-js" controls' +
                    '<video class="video-js" controls' +
                    '<source src="this.srcPath" type="video/mp4">' +
                    '<source src="this.srcPath" type="video/ogg">' +
                    '</video>'
                // 最终只能使用$refs.videoDiv的子元素作为参数
                // this.player = videojs("video");
                // this.player = videojs(this.$refs.video);
                this.player = videojs(this.$refs.videoDiv.firstElementChild);
            }
        }
    }
</script>

长视频点击进度条导致进度归零重新播放

在解决上述一系列问题后，发现点击视频进度条视频进度归零的问题。6min长度的视频会发生这种问题，而3s的视频可以正常拖动进度条。

目前尚无法解决。