1.第一步
[html] view plain copy
<link href="video-js.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="video.js"></script>
2.第二步
[javascript] view plain copy
<script>
videojs.options.flash.swf = "video-js.swf"
</script>
3.第三步[html] view plain copy
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="480" data-setup="{}">
<source src="wangdeshun.mp4" type="video/mp4"/>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
4.第四步[javascript] view plain copy
<script>
var player = videojs("example_video_1")
// 检测播放时间
player.on('timeupdate', function () {
console.log('当前播放时间：' = player.currentTime())
}
})
// 开始或恢复播放
player.on('play', function() {
console.log('开始/恢复播放')
})
// 暂停播放
player.on('pause', function() {
console.log('暂停播放')
})
/在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
setTimeout(function(){
player.pause()
},10000)
</script>
这样就可以播放网络视频了。是不是很方便。
检测视频是否播放完毕
[javascript] view plain copy
player.on('timeupdate', function () {
// 如果 currentTime() === duration()，则视频已播放完毕
if (player.duration() != 0 && player.currentTime() === player.duration()) {
// 播放结束
}
})
如果是手机使用 需要[html] view plain copy
在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
使用jPlayer，如下步骤：
1、先写HTML
type="text/javascript" src="js/jquery.jplayer.js"></script>
<div id="jpId"></div> //为播放器准备的层
2、初始化jPlayer
<script>$(document).ready(function() {
$("#jpId").jPlayer( { //先要引用存放播放器的层
ready:function () {//ready属性的设置
this.element.jPlayer("setFile", "../mp3/elvis.mp3") //定义mp3文件
this.play() // 自动播放
}
</script>
})
})
jPlay的兼容性很好的啦,基本上浏览器兼容性这块不用考虑的
前言在使用vue-video-player 老是无法播放视频，出现如下错误。
最终在不懈努力下和强大的搜索引擎加持下，终于拼凑成了一个可以播放的结果,具体参照如下代码。
实践
1.npm 参考地址
vue-video-player
2.安装插件
npm install vue-video-player --save
3.引入
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
4.页面中使用
最终
<template>
<div>
<!-- 页头配置 -->
<div class="page-content">
<!--在视频外面加一个容器-->
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
></video-player>
</div>
</div>
</template>
<script>
// 1.全局引用
import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
export default {
mounted() {},
components: {},
data() {
return {
// 视频播放
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
