หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ซอร์สโค้ดแฟลช
ดาวน์โหลด

Vue-medialement

Video Live Player

ติดตั้ง 

$ npm install vue-mediaelement

นำเข้า

นำเข้าโดยใช้โมดูล

นำเข้าส่วนประกอบไปยังโครงการของคุณ: 

 require ( 'vue-mediaelement/dist/vue-mediaelement.css' ) ;

// in ES6 modules
import { Mediaelement } from 'vue-mediaelement' ;

// in CommonJS
const { Mediaelement } = require ( 'vue-mediaelement' ) ;

// in Global variable
const { Mediaelement } = VueMediaelement ;

และลงทะเบียนส่วนประกอบ: 

 Vue . component ( 'mediaelement' , Mediaelement ) ;

นำเข้าโดยใช้แท็กสคริปต์ 

 < link rel =" stylesheet " href =" ../node-modules/vue-mediaelement/dist/vue-mediaelement.css " charset =" utf-8 " >
< script src =" ../node-modules/vue-mediaelement/dist/vue-mediaelement.js " > </ script > 
 const vueMediaelement = VueMediaelement . Mediaelement ;

new Vue ( {
  el : 'body' ,
  components : {
    'mediaelement' : vueMediaelement
  }
} ) ;

การใช้งาน

ทำงานกับอินสแตนซ์ VUE: 

 < mediaelement class =" my-play " > </ mediaelement > 
. my-play {
  height : 200 px ;
  text-align : center;
}

ตัวเลือก

อุปกรณ์ประกอบฉาก

ตัวเลือก พิมพ์ คำอธิบาย ค่าเริ่มต้น
แหล่งที่มา สาย ระบุ URL ของไฟล์วิดีโอ ค่านี้สามารถระบุได้ด้วยแท็กต้นทาง (ดูส่วนตัวแปลงสัญญาณหลายตัวสำหรับข้อมูลเพิ่มเติม) -
ความกว้าง สาย ตั้งค่าความกว้างของเครื่องเล่นวิดีโอเป็นพิกเซล คุณยังสามารถระบุเปอร์เซ็นต์ 480
ความสูง สาย ตั้งค่าความสูงของเครื่องเล่นวิดีโอเป็นพิกเซล คุณยังสามารถระบุเปอร์เซ็นต์ 270
โหลดล่วงหน้า สาย ระบุว่าผู้เขียนคิดอย่างไรว่าควรโหลดวิดีโอเมื่อโหลดหน้าเว็บหรือไม่ ค่าที่เป็นไปได้: auto , metadata หรือ none (แนะนำ) ไม่มี
เล่นอัตโนมัติ บูลีน ระบุว่าวิดีโอจะเริ่มเล่นทันทีที่พร้อม เท็จ
มีความสุข บูลีน หากตั้งค่าเป็นจริงข้อความการถ่ายทอดสดจะปรากฏขึ้นและแถบความคืบหน้าจะถูกซ่อนอยู่ไม่ว่าระยะเวลาจะเป็นหมายเลขที่ถูกต้อง จริง

เหตุการณ์

ชื่อเหตุการณ์ พิมพ์ คำอธิบาย
ความสำเร็จ การโทรกลับ การดำเนินการที่จะดำเนินการทันทีที่มีการโหลดแหล่งที่มา ผ่าน 2 อาร์กิวเมนต์: สื่อ (wrapper ที่เลียนแบบเหตุการณ์/คุณสมบัติ/วิธีการทั้งหมดสำหรับการเรนเดอร์ทั้งหมด) และโหนด (วิดีโอ HTML ดั้งเดิม, แท็กเสียงหรือ iframe ที่มีการโหลดสื่อเดิมถ้ามีการใช้ HTML5 สื่อและโหนด
ข้อผิดพลาด การโทรกลับ การดำเนินการที่จะดำเนินการหากแหล่งที่มาไม่โหลดไม่ว่าด้วยเหตุผลใดก็ตาม ผ่านข้อโต้แย้งเดียวกันกับความสำเร็จ

คำถามที่พบบ่อย

วิธีการเขียนโปรแกรม medelement ไปยังรายการ?

ใช้วิธีการอ้างอิงและการโทร remove() 

 this . $refs . mediaelement . remove ( newIndex )

สำหรับรายละเอียดเพิ่มเติมโปรดดูรหัสตัวอย่าง

การพัฒนา

ดูด้วยการโหลดร้อน: 

$ npm run dev

พัฒนาบนอุปกรณ์ระยะไกลจริง: 

$ npm run remote-dev {{ YOUR IP ADDRESS }}

ใบอนุญาต

มิกซ์

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด