<template> <div class="trial"> <video id="videoPlayer" class="video-js vjs-default-skin" controls preload="auto" poster="/img/trial/video-bg.png" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-fullscreen="true" x5-video-orientation="landscape" /> <!--controls 如果设置了该属性,则规定不存在作者设置的脚本控件。 --> <!-- preload 属性规定是否在页面加载后载入视频。 --> <!-- poster 属性规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 --> <!-- x-webkit-airplay 在移动端,不默认全屏播放 --> <!-- webkit-playsinline 让视频在小窗内播放,也就是不是全屏播放 --> <!-- playsinline IOS微信浏览器支持小窗内播放 --> <!-- x5-video-player-fullscreen 全屏设置,设置为 true 是防止横屏--> <!-- x5-video-orientation 播放器支付的方向, landscape横屏,portraint竖屏,默认值为竖屏--> <div @click="play">播放</div> </div> </template> <script> import "video.js/dist/video-js.css"; import videojs from "video.js"; import "@videojs/http-streaming"; export default { data() { return { player: null }; }, mounted() { this.player = videojs("videoPlayer", { bigPlayButton: false, // 隐藏默认播放按钮 textTrackDisplay: false, // 用于显示文本跟踪提示的组件 posterImage: true, // 是否启用静止图片 errorDisplay: false, //显示错误 controlBar: true, // 控制条 aspectRatio: '480:270', // 宽高比设定 playbackRates: [1, 1.25, 1.5, 2] // 倍速播放 }); 请求.then(res => { this.player.src({ src: res.course.video, type: "application/x-mpegURL", withCredentials: false }); }) .catch(err => { console.log(err, 'error'); }); }, methods:{ play(){ this.player.play(); } } }; </script>
videojs 视频播放m3u8
猜你喜欢
转载自www.cnblogs.com/jia-ze/p/12983945.html
今日推荐
周排行