|
|
@@ -6,27 +6,12 @@
|
|
|
<div class="video-info">
|
|
|
|
|
|
<div class="video-src">
|
|
|
- <!--<video controls="controls" width="800" style="display:block;"
|
|
|
- src="https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190516/acalssOne%E7%BD%91%E9%A1%B5%E7%99%BB%E5%BD%95%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95.mp4">
|
|
|
- 您的浏览器不支持 video 标签。
|
|
|
- </video>-->
|
|
|
<video-player class="video-player-box" style="width:800px;"
|
|
|
ref="videoPlayer"
|
|
|
:options="playerOptions"
|
|
|
- :playsinline="true"
|
|
|
- customEventName="customstatechangedeventname"
|
|
|
- @play="onPlayerPlay($event)"
|
|
|
- @pause="onPlayerPause($event)"
|
|
|
- @ended="onPlayerEnded($event)"
|
|
|
- @waiting="onPlayerWaiting($event)"
|
|
|
- @playing="onPlayerPlaying($event)"
|
|
|
- @loadeddata="onPlayerLoadeddata($event)"
|
|
|
- @timeupdate="onPlayerTimeupdate($event)"
|
|
|
- @canplay="onPlayerCanplay($event)"
|
|
|
- @canplaythrough="onPlayerCanplaythrough($event)"
|
|
|
- @statechanged="playerStateChanged($event)"
|
|
|
- @ready="playerReadied">
|
|
|
+ :playsinline="true">
|
|
|
</video-player>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
<div class="video-detail-info">
|
|
|
@@ -75,21 +60,27 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import rewardList from '@/static/rewardList.json'
|
|
|
+ import"videojs-contrib-hls.js/src/videojs.hlsjs"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
playerOptions: {
|
|
|
- // videojs options
|
|
|
- muted: true,
|
|
|
- language: 'en',
|
|
|
- preload: 'auto',
|
|
|
- playbackRates: [0.7, 1.0, 1.5, 2.0],
|
|
|
+ playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
|
|
|
+ autoplay: false, //如果true,浏览器准备好时开始回放。
|
|
|
+ controls: true, //控制条
|
|
|
+ preload: 'auto', //视频预加载
|
|
|
+ muted: false, //默认情况下将会消除任何音频。
|
|
|
+ loop: false, //导致视频一结束就重新开始。
|
|
|
+ language: 'zh-CN',
|
|
|
+ aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
|
|
+ fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
|
|
sources: [{
|
|
|
- type: "video/mp4",
|
|
|
- src: "https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/%E5%B0%8F%E5%AD%A6%E8%8B%B1%E8%AF%AD301%E8%83%A1%E9%A2%96--2019.mp4"
|
|
|
- //src: "https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/%E5%B0%8F%E5%AD%A6%E8%8B%B1%E8%AF%AD301%E8%83%A1%E9%A2%96--20180419.MP4"
|
|
|
+ type: 'application/x-mpegURL',
|
|
|
+ src: 'https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/demo/2019.m3u8'
|
|
|
}],
|
|
|
- poster: "/static/images/author.jpg",
|
|
|
+ poster: "http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg", //你的封面地址
|
|
|
+ width: document.documentElement.clientWidth,
|
|
|
+ notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
|
|
},
|
|
|
routerData: {},
|
|
|
rewardDatas: [],
|
